<template>
	<div class="dashboard-container">
		<!-- 背景图层 -->
		<div class="dashboard-bg"></div>

		<!-- 顶部标题栏 -->
		<div class="dashboard-header">
			<div class="header-left">
				<img v-if="systemSettings.titleLogo" :src="systemSettings.titleLogo" class="logo-image" />
				<router-link to="/index" class="system-title">
					<div class="title-wrapper">
						<span class="cn-text">{{ systemSettings.sysTitle }}</span>
						<span class="en-text">Smart Lock Management</span>
					</div>
				</router-link>
			</div>
			<div class="header-center">
				<div class="main-title">
					<span class="title-text">校园智能门锁可视化平台</span>
				</div>
			</div>
			<div class="header-right">
				<div class="company-name">{{ systemSettings.cmpName }}</div>
				<div class="current-time">{{ currentTime }}</div>
			</div>
		</div>

		<!-- 主要内容区域 -->
		<div class="dashboard-content">
			<!-- 左侧面板 -->
			<div class="left-panel panel">
				<!-- 设备状态概览 -->
				<div class="panel-item">
					<div class="panel-header">
						<span class="panel-title">钥匙状态概览</span>
					</div>
					<div class="panel-content key-status-content">
						<div class="key-status-container">
							<div class="key-status-card" @click="navigateToKeyStatus('valid')">
								<div class="key-icon online">
									<i class="el-icon-key"></i>
								</div>
								<div class="key-info">
									<div class="key-value">{{ deviceStatus.online }}</div>
									<div class="key-label">有效期内</div>
								</div>
							</div>

							<div class="key-status-card" @click="navigateToKeyStatus('expiring')">
								<div class="key-icon expiring">
									<i class="el-icon-time"></i>
								</div>
								<div class="key-info">
									<div class="key-value">{{ deviceStatus.offline }}</div>
									<div class="key-label">即将到期</div>
								</div>
							</div>

							<div class="key-status-card" @click="navigateToKeyStatus('expired')">
								<div class="key-icon warning">
									<i class="el-icon-warning"></i>
								</div>
								<div class="key-info">
									<div class="key-value">{{ deviceStatus.warning }}</div>
									<div class="key-label">已到期</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 设备类型分布 -->
				<div class="panel-item">
					<div class="panel-header">
						<span class="panel-title">设备状态</span>
					</div>
					<div class="panel-content device-status-container">
						<div class="device-status-overview">
							<div class="device-status-gauge">
								<div class="gauge-display">
									<div class="gauge-number">{{ deviceOnlinePercentage }}%</div>
									<div class="gauge-label">在线率</div>
								</div>
								<div class="gauge-ring">
									<svg viewBox="0 0 120 120">
										<circle class="gauge-ring-bg" cx="60" cy="60" r="54" />
										<circle class="gauge-ring-fill" cx="60" cy="60" r="54"
											:stroke-dasharray="`${deviceOnlinePercentage * 3.39} 339`" />
										<text x="60" y="40" class="gauge-text online">在线</text>
										<text x="60" y="80" class="gauge-text offline">离线</text>
									</svg>
								</div>
							</div>
							<div class="device-status-stats">
								<div class="status-row">
									<div class="status-label">
										<div class="status-dot online"></div>
										<span>在线设备</span>
									</div>
									<div class="status-count">{{ onlineCount }} 台</div>
									<div class="status-bar-container">
										<div class="status-bar online" :style="{width: `${deviceOnlinePercentage}%`}">
										</div>
									</div>
								</div>
								<div class="status-row">
									<div class="status-label">
										<div class="status-dot offline"></div>
										<span>离线设备</span>
									</div>
									<div class="status-count">{{ offlineCount }} 台</div>
									<div class="status-bar-container">
										<div class="status-bar offline"
											:style="{width: `${100 - deviceOnlinePercentage}%`}"></div>
									</div>
								</div>
								<div class="status-row total">
									<div class="status-label">
										<i class="el-icon-monitor"></i>
										<span>设备总数</span>
									</div>
									<div class="status-count">{{ totalDeviceCount }} 台</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 男女比例 -->
				<div class="panel-item battery-panel">
					<div class="panel-header">
						<span class="panel-title">男女比例</span>
					</div>
					<div class="panel-content gender-ratio-container">
						<div class="gender-horizontal-layout">
							<!-- 环形进度图 -->
							<div class="gender-ratio-ring">
								<div class="ring-container">
									<div class="ring-background"></div>
									<div class="ring-progress"
										:style="{background: `conic-gradient(#3b80ff ${malePercent}%, #e83e8c ${malePercent}% 100%)`}">
									</div>
									<div class="ring-inner">
										<div class="total-count">{{ totalPeople }}</div>
										<div class="total-label">总人数</div>
									</div>
								</div>
								<div class="ring-legend">
									<div class="legend-item male">
										<div class="legend-color"></div>
										<div class="legend-text">已住男性 {{ malePercent }}%</div>
									</div>
									<div class="legend-item female">
										<div class="legend-color"></div>
										<div class="legend-text">已住女性 {{ femalePercent }}%</div>
									</div>
								</div>
							</div>

							<!-- 3D卡片 -->
							<div class="gender-cards">
								<div class="card-container">
									<!-- 男性卡片 -->
									<div class="gender-card male-card">
										<div class="card-glow"></div>
										<div class="card-content">
											<div class="card-icon">
												<i class="el-icon-male"></i>
											</div>
											<div class="card-stats">
												<div class="card-number">{{ sexRatioData.male || 0 }}</div>
												<div class="card-label">已住男性</div>
											</div>
										</div>
									</div>

									<!-- 女性卡片 -->
									<div class="gender-card female-card">
										<div class="card-glow"></div>
										<div class="card-content">
											<div class="card-icon">
												<i class="el-icon-female"></i>
											</div>
											<div class="card-stats">
												<div class="card-number">{{ sexRatioData.female || 0 }}</div>
												<div class="card-label">已住女性</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 中间面板 -->
			<div class="center-panel panel">
				<!-- 运行数据卡片 -->
				<div class="data-cards" style="padding-top: 0;">
					<div class="data-card" @click="navigateToRoomList('all')">
						<div class="card-icon"><i class="el-icon-house"></i></div>
						<div class="card-info">
							<div class="card-value">{{ roomStats.total }}</div>
							<div class="card-label">房源总数</div>
						</div>
					</div>

					<div class="data-card" @click="navigateToRoomList('occupied')">
						<div class="card-icon"><i class="el-icon-user"></i></div>
						<div class="card-info">
							<div class="card-value">{{ roomStats.occupied }}</div>
							<div class="card-label">在住房</div>
						</div>
					</div>

					<div class="data-card" @click="navigateToRoomList('vacant')">
						<div class="card-icon"><i class="el-icon-office-building"></i></div>
						<div class="card-info">
							<div class="card-value">{{ roomStats.vacant }}</div>
							<div class="card-label">空置房源</div>
						</div>
					</div>

					<div class="data-card warning" @click="navigateToRoomList('tampered')">
						<div class="card-icon"><i class="el-icon-warning-outline"></i></div>
						<div class="card-info">
							<div class="card-value">{{ roomStats.tampered }}</div>
							<div class="card-label">被撬设备</div>
						</div>
					</div>
				</div>

				<!-- 校区地图 -->
				<div class="map-container">
					<div id="baiduMap" class="map-content">
						<div class="map-loading">
							<i class="el-icon-loading"></i>
							<span>地图加载中...</span>
						</div>
					</div>
				</div>

				<!-- 实时操作日志与空置房 -->
				<div class="panels-row">
					<!-- 月开门方式统计 -->
					<div class="logs-panel panel-item">
						<div class="panel-header">
							<span class="panel-title">
								<i class="el-icon-data-analysis"></i>
								月开门方式统计
							</span>
							<span class="panel-subtitle">{{ lockUsageTotal }} 次开门</span>
						</div>
						<div class="lock-usage-container">
							<div v-if="lockUsageData.length === 0" class="empty-lock-usage">
								<div class="empty-icon">
									<i class="el-icon-data-analysis"></i>
								</div>
								<div class="empty-title">暂无开门数据</div>
								<div class="empty-desc">本月暂无开门记录</div>
							</div>
							<div v-for="(item, index) in lockUsageData" :key="index" class="lock-usage-item">
								<div class="usage-left">
									<div class="usage-icon" :style="{backgroundColor: getUsageColor(item.name)}">
										<i :class="getUsageIcon(item.name)"></i>
									</div>
								</div>
								<div class="usage-center">
									<div class="usage-header">
										<div class="usage-name">{{ item.name }}</div>
										<div class="usage-value">{{ item.value }} 次</div>
									</div>
									<div class="usage-progress">
										<div class="progress-bar">
											<div class="progress-fill"
												:style="{width: `${Math.round(item.value / lockUsageTotal * 100)}%`, backgroundColor: getUsageColor(item.name)}">
											</div>
										</div>
										<span class="progress-text">{{ Math.round(item.value / lockUsageTotal * 100) }}%</span>
									</div>
								</div>
								<div class="usage-right">
									<div class="usage-rank" :class="`rank-${index + 1}`">
										{{ index + 1 }}
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- 3天未通讯设备 -->
					<div class="vacancy-panel panel-item">
						<div class="panel-header">
							<span class="panel-title">3天未通讯</span>
							<span class="panel-subtitle">{{ noCommunicationTotal }} 台设备</span>
						</div>
						<div class="log-container">
							<div ref="noCommunicationScrollWrapper" class="vacancy-scroll-wrapper"
								@scroll="handleNoCommunicationScroll">
								<div v-if="noCommunicationList.length === 0" class="empty-no-communication">
									<div class="empty-icon">
										<i class="el-icon-success"></i>
									</div>
									<div class="empty-title">通讯状态良好</div>
									<div class="empty-desc">所有设备均在正常通讯中</div>
								</div>
								<div v-for="(item, index) in noCommunicationList" :key="index"
									class="no-communication-item">
									<div class="item-left">
										<div class="item-icon">
											<i class="el-icon-warning"></i>
										</div>
									</div>
									<div class="item-center">
										<div class="item-title">{{ item.cellName }}</div>
										<div class="item-subtitle">{{ item.unitName }} · {{ item.floorName }} ·
											{{ item.roomName }}</div>
										<div class="item-time">
											<i class="el-icon-time"></i>
											<span>{{ formatLastCommunication(item.last_communication) }}</span>
										</div>
									</div>
									<div class="item-right">
										<span class="status-badge">离线</span>
									</div>
								</div>
								<div v-if="noCommunicationLoading" class="loading-more">
									<i class="el-icon-loading"></i>
									<span>加载中...</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 右侧面板 -->
			<div class="right-panel panel">
				<!-- 在线续租业务 -->
				<div class="panel-item">
					<div class="panel-header">
						<span class="panel-title">设备电量分布</span>
						<span class="panel-subtitle">总设备数: {{ totalBatteryDevices }} 台</span>
					</div>
					<div class="panel-content battery-panel-content">
						<!-- 使用四个方块表示电量分布 -->
						<div class="battery-blocks">
							<!-- 充足电量 - 修复图标 -->
							<div class="battery-block high">
								<div class="block-icon">
									<i class="el-icon-success"></i>
								</div>
								<div class="block-info">
									<div class="level-name">充足 &gt;50%</div>
									<div class="device-count">{{ batteryDistribution.high }} 台</div>
								</div>
							</div>

							<!-- 中等电量 - 修复图标 -->
							<div class="battery-block medium">
								<div class="block-icon">
									<i class="el-icon-info"></i>
								</div>
								<div class="block-info">
									<div class="level-name">中等 20-50%</div>
									<div class="device-count">{{ batteryDistribution.medium }} 台</div>
								</div>
							</div>

							<!-- 较低电量 -->
							<div class="battery-block low">
								<div class="block-icon">
									<i class="el-icon-warning"></i>
								</div>
								<div class="block-info">
									<div class="level-name">较低 10-20%</div>
									<div class="device-count">{{ batteryDistribution.low }} 台</div>
								</div>
							</div>

							<!-- 极低电量 -->
							<div class="battery-block very-low">
								<div class="block-icon">
									<i class="el-icon-warning-outline"></i>
								</div>
								<div class="block-info">
									<div class="level-name">极低 &lt;10%</div>
									<div class="device-count">{{ batteryDistribution.veryLow }} 台</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 开门记录 -->
				<div class="panel-item">
					<div class="panel-header">
						<span class="panel-title">开门记录</span>
					</div>
					<div class="log-container">
						<div ref="logScrollWrapper" class="log-scroll-wrapper" @mouseenter="pauseLogScroll"
							@mouseleave="resumeLogScroll">
							<div v-if="filteredLogs.length === 0" class="empty-log">
								<i class="el-icon-chat-line-square"></i>
								<span>暂无操作记录</span>
							</div>
							<div v-for="(log, index) in filteredLogs" :key="index" class="log-item" :class="log.type">
								<div class="log-icon">
									<i :class="getLogIcon(log.type)"></i>
								</div>
								<div class="log-details">
									<div class="log-header">
										<div class="log-time">{{ log.time }}</div>
										<div class="log-type" :class="log.type">{{ getLogTypeText(log.type) }}</div>
									</div>
									<div class="log-content">{{ log.content }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import {
		listCell2
	} from '@/api/lock/cell'
	import {
		smartlocksStatus,
		roomStatistics,
		gaoJinCount,
		wujuzhuCount,
		selectXianZhiCount,
		keyExpiryStatus,
		deviceBatteryDistribution,
		lockFangShiPie
	} from '@/api/lock/menu'
	import {
		info
	} from '@/api/dashboard'
	import {
		listOpenlock
	} from '@/api/lock/openlock'
	import {
		sexFenBu
	} from '@/api/lock/menu'
	import {
		formatDate
	} from '@/utils/index'
	import {
		getInfo
	} from '@/api/login'

	export default {
		name: "SmartLockDashboard",
		data() {
			return {
				currentTime: "",
				timerInterval: null,
				logRefreshInterval: null,
				map: null, // 百度地图实例
				// 深蓝色主题样�?
				darkBlueStyle: [{
					"featureType": "land",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"color": "#091220ff"
					}
				}, {
					"featureType": "water",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"color": "#113549ff"
					}
				}, {
					"featureType": "green",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"color": "#0e1b30ff"
					}
				}, {
					"featureType": "building",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "building",
					"elementType": "geometry.topfill",
					"stylers": {
						"color": "#113549ff"
					}
				}, {
					"featureType": "building",
					"elementType": "geometry.sidefill",
					"stylers": {
						"color": "#143e56ff"
					}
				}, {
					"featureType": "building",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#dadada00"
					}
				}, {
					"featureType": "subwaystation",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"color": "#113549B2"
					}
				}, {
					"featureType": "education",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"color": "#12223dff"
					}
				}, {
					"featureType": "medical",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"color": "#12223dff"
					}
				}, {
					"featureType": "scenicspots",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"color": "#12223dff"
					}
				}, {
					"featureType": "highway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"weight": "4"
					}
				}, {
					"featureType": "highway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "highway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#fed66900"
					}
				}, {
					"featureType": "highway",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "highway",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "highway",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "highway",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "arterial",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"weight": "2"
					}
				}, {
					"featureType": "arterial",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "arterial",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffeebb00"
					}
				}, {
					"featureType": "arterial",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "arterial",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "arterial",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "local",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on",
						"weight": "1"
					}
				}, {
					"featureType": "local",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "local",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "local",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "local",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#979c9aff"
					}
				}, {
					"featureType": "local",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffffff"
					}
				}, {
					"featureType": "railway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "subway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"weight": "1"
					}
				}, {
					"featureType": "subway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#d8d8d8ff"
					}
				}, {
					"featureType": "subway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "subway",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "subway",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#979c9aff"
					}
				}, {
					"featureType": "subway",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffffff"
					}
				}, {
					"featureType": "continent",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "continent",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "continent",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "continent",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "city",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "city",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "city",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "city",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "town",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "town",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "town",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#454d50ff"
					}
				}, {
					"featureType": "town",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffffff"
					}
				}, {
					"featureType": "road",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "poilabel",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "districtlabel",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "road",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "road",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "road",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "district",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "poilabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "poilabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "poilabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "manmade",
					"elementType": "geometry",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "districtlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffffff"
					}
				}, {
					"featureType": "entertainment",
					"elementType": "geometry",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "shopping",
					"elementType": "geometry",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "nationalway",
					"stylers": {
						"level": "6",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"stylers": {
						"level": "7",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"stylers": {
						"level": "8",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"stylers": {
						"level": "9",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"stylers": {
						"level": "10",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "6",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "7",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "8",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "9",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "10",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels",
					"stylers": {
						"visibility": "off",
						"level": "6",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels",
					"stylers": {
						"visibility": "off",
						"level": "7",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels",
					"stylers": {
						"visibility": "off",
						"level": "8",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels",
					"stylers": {
						"visibility": "off",
						"level": "9",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels",
					"stylers": {
						"visibility": "off",
						"level": "10",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-10"
					}
				}, {
					"featureType": "cityhighway",
					"stylers": {
						"level": "6",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "cityhighway",
					"stylers": {
						"level": "7",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "cityhighway",
					"stylers": {
						"level": "8",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "cityhighway",
					"stylers": {
						"level": "9",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "6",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "7",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "8",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off",
						"level": "9",
						"curZoomRegionId": "0",
						"curZoomRegion": "6-9"
					}
				}, {
					"featureType": "subwaylabel",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "subwaylabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "tertiarywaysign",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "tertiarywaysign",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "provincialwaysign",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "provincialwaysign",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "nationalwaysign",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "nationalwaysign",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "highwaysign",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "highwaysign",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "village",
					"elementType": "labels",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "district",
					"elementType": "labels.text",
					"stylers": {
						"fontsize": "20"
					}
				}, {
					"featureType": "district",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "district",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "country",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "country",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "water",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "water",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "tertiaryway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "tertiaryway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff10"
					}
				}, {
					"featureType": "provincialway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "provincialway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "highway",
					"elementType": "labels.text",
					"stylers": {
						"fontsize": "20"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "nationalway",
					"elementType": "labels.text",
					"stylers": {
						"fontsize": "20"
					}
				}, {
					"featureType": "provincialway",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "provincialway",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "provincialway",
					"elementType": "labels.text",
					"stylers": {
						"fontsize": "20"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "labels.text",
					"stylers": {
						"fontsize": "20"
					}
				}, {
					"featureType": "cityhighway",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "estate",
					"elementType": "geometry",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "tertiaryway",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "tertiaryway",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "fourlevelway",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "fourlevelway",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "scenicspotsway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "scenicspotsway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "universityway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "universityway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "vacationway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "vacationway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "fourlevelway",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "fourlevelway",
					"elementType": "geometry.fill",
					"stylers": {
						"color": "#12223dff"
					}
				}, {
					"featureType": "fourlevelway",
					"elementType": "geometry.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "transportationlabel",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "transportationlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "transportationlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "transportationlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "educationlabel",
					"elementType": "labels",
					"stylers": {
						"visibility": "on"
					}
				}, {
					"featureType": "educationlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "educationlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "educationlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "transportation",
					"elementType": "geometry",
					"stylers": {
						"color": "#113549ff"
					}
				}, {
					"featureType": "airportlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "airportlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "scenicspotslabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "scenicspotslabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "medicallabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "medicallabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "medicallabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "scenicspotslabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "airportlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "entertainmentlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "entertainmentlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "entertainmentlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "estatelabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "estatelabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "estatelabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "businesstowerlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "businesstowerlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "businesstowerlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "companylabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "companylabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "companylabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "governmentlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "governmentlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "governmentlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "restaurantlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "restaurantlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "restaurantlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "hotellabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "hotellabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "hotellabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "shoppinglabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "shoppinglabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "shoppinglabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "lifeservicelabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "lifeservicelabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "lifeservicelabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "carservicelabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "carservicelabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "carservicelabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "financelabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "financelabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "financelabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "otherlabel",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "otherlabel",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "otherlabel",
					"elementType": "labels.icon",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "manmade",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "manmade",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "transportation",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "transportation",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "education",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "education",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "medical",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "medical",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "scenicspots",
					"elementType": "labels.text.fill",
					"stylers": {
						"color": "#2dc4bbff"
					}
				}, {
					"featureType": "scenicspots",
					"elementType": "labels.text.stroke",
					"stylers": {
						"color": "#ffffff00"
					}
				}, {
					"featureType": "background",
					"elementType": "geometry",
					"stylers": {
						"visibility": "off"
					}
				}, {
					"featureType": "parkinglot",
					"elementType": "geometry",
					"stylers": {
						"visibility": "on"
					}
				}],
				cellList: [], // 存储校区数据
				// 添加新的数据属�?
				deviceStatus: {
					online: 0,
					offline: 0,
					warning: 0
				},
				roomStats: {
					total: 0,
					rented: 0,
					vacant: 0,
					tampered: 0
				},
				dashboardInfo: {},
				incomeStats: {
					total: 0,
					rental: 0,
					deposit: 0,
					service: 0
				},
				// 最近操作日�?
				recentLogs: [],
				sexRatioData: {
					male: 0,
					female: 0
				},
				vacancyList: [],
				// 3天未通讯设备相关数据
				noCommunicationList: [],
				noCommunicationTotal: 0,
				noCommunicationLoading: false,
				noCommunicationPageNum: 1,
				noCommunicationPageSize: 20,
				// 开门方式统计相关数据
				lockUsageData: [],
				lockUsageTotal: 0,
				// 地图加载相关
				mapLoadTimeout: null,
				systemSettings: {
					sysTitle: '',
					titleLogo: '',
					cmpName: '' // 添加公司名称字段
				},
				// 添加日志滚动相关数据
				logScrollInterval: null,
				isLogScrollPaused: false,
				onlineCount: 0,
				offlineCount: 0,
				batteryDistribution: {
					veryLow: 0, // 10%以下
					low: 0, // 10-20%
					medium: 0, // 20-50%
					high: 0 // 50-100%
				},
			};
		},
		created() {
			this.timerInterval = setInterval(this.updateCurrentTime, 1000);
			// 获取系统设置
			this.getSystemSettings()
			// 更新时间
			this.updateCurrentTime()
			setInterval(this.updateCurrentTime, 1000)
		},
		activated() {
			// 当组件被激活时（从缓存中恢复），重新初始化地图
			console.log('组件被激活，重新初始化地图');
			this.$nextTick(() => {
				setTimeout(() => {
					if (!this.map) {
						this.loadBaiduMapScript();
					}
				}, 200);
			});
		},
		deactivated() {
			// 当组件被停用时，销毁地图
			console.log('组件被停用，销毁地图');
			this.destroyMap();
		},
		mounted() {
			// 在此处可以初始化图表和地�?
			this.initCharts();
			// 获取校区数据
			this.getCellList();
			// 获取设备状态数�?
			this.getDeviceStatus();
			// 获取房间统计数据
			this.getRoomStatistics();
			// 获取设备被撬数据
			this.getTamperedCount();
			// 获取仪表盘信�?
			// this.getDashboardInfo();
			// 获取实时开门记�?
			this.getRealLogs(); // 使用getRealLogs方法替代getRecentLogs
			// 获取钥匙过期状�?
			this.getKeyExpiryStatus();
			// 设置自动刷新开门记录的定时器，�?0秒刷新一�?
			this.logRefreshInterval = setInterval(this.getRealLogs, 30000);
			this.getSexRatio(); // 获取男女比例数据
			// this.startTimeInterval();
			// 获取3天未通讯设备数据
			this.getNoCommunicationList(true);
			// 获取开门方式统计数据
			this.getLockUsageData();
			// 获取设备电量分布数据
			this.getDeviceBatteryDistribution();

			// 启动自动滚动日志
			this.$nextTick(() => {
				this.startLogScroll();
				// 立即开始加载地图
				this.loadBaiduMapScript();
			});
		},
		beforeDestroy() {
			clearInterval(this.timerInterval);
			this.timerInterval = null;
			// 清除开门记录刷新定时器
			if (this.logRefreshInterval) {
				clearInterval(this.logRefreshInterval);
				this.logRefreshInterval = null;
			}

			// 清除日志滚动定时�?
			this.stopLogScroll();
		},
		methods: {
			// 获取钥匙过期状态数�?
			getKeyExpiryStatus() {
				keyExpiryStatus({}).then(response => {
					if (response.code === 200) {
						const data = response.data || {};
						// 更新设备状态数�?
						this.deviceStatus.online = data.validCount || 0;
						this.deviceStatus.offline = data.expiringCount || 0;
						this.deviceStatus.warning = data.expiredCount || 0;

						// 移除这里的图表初始化，因为已经在 getDeviceStatus 中处理了
					} else {
						this.$message.error('获取钥匙过期状态数据失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取钥匙过期状态数据出错：', error);
				});
			},

			// 初始化设备状态图�?
			initDeviceStatusChart(offlineCount = 0, onlineCount = 0) {
				console.log('Initializing device status chart with:', {
					offlineCount,
					onlineCount
				});

				const chartDom = document.getElementById('deviceTypeChart');
				if (!chartDom) {
					console.error('未找到设备状态图表容器');
					return;
				}
				console.log('Found chart container:', chartDom);

				const myChart = echarts.init(chartDom);
				console.log('Initialized ECharts instance');

				const option = {
					backgroundColor: 'transparent',
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						right: '5%',
						top: 'center',
						textStyle: {
							color: '#6b91c7',
							fontSize: 14
						}
					},
					series: [{
						name: '设备状态',
						type: 'pie',
						radius: ['40%', '70%'],
						center: ['40%', '50%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#051333',
							borderWidth: 2,
							shadowBlur: 15,
							shadowColor: 'rgba(0, 0, 0, 0.3)'
						},
						label: {
							show: true,
							position: 'inside',
							formatter: '{c}台',
							fontSize: 16,
							fontWeight: 'bold',
							color: '#fff',
							textShadow: '0 0 3px rgba(0, 0, 0, 0.8)'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 18,
								fontWeight: 'bold'
							},
							itemStyle: {
								shadowBlur: 25,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						data: [{
								value: onlineCount,
								name: '在线',
								itemStyle: {
									color: '#18d26e'
								}
							},
							{
								value: offlineCount,
								name: '离线',
								itemStyle: {
									color: '#ff9800'
								}
							}
						],
						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function(idx) {
							return Math.random() * 200;
						}
					}]
				};

				myChart.setOption(option);

				// 注册窗口大小变化事件
				window.addEventListener('resize', () => {
					myChart.resize();
				});
			},

			// 获取设备状态数�?
			getDeviceStatus() {
				smartlocksStatus({}).then(response => {
					if (response.code === 200) {
						const data = response.data || {};
						// 使用API返回的lixianCount和zaixianCount
						this.offlineCount = data.lixianCount || 0;
						this.onlineCount = data.zaixianCount || 0;

						console.log('设备状态数�?', data);

						// 不再调用饼图初始�?
						// this.initDeviceStatusChart(offlineCount, onlineCount);
					} else {
						this.$message.error('获取设备状态数据失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取设备状态数据出错：', error);
				});
			},

			// 获取房间统计数据
			getRoomStatistics() {
				roomStatistics({}).then(response => {
					if (response.code === 200) {
						const data = response.data || {};
						this.roomStats.total = data.totalRooms || 0;
						this.roomStats.rented = data.rentedRooms || 0;
						this.roomStats.occupied = data.rentedRooms || 0; // 添加这行，将在住房数据赋值给occupied
						this.roomStats.vacant = data.idleRooms || 0;

						// 获取设备被撬数据
						this.getTamperedCount();
					} else {
						this.$message.error('获取房间统计数据失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取房间统计数据出错：', error);
				});
			},

			// 获取最近开门记?
			getRecentOpenLogs() {
				const query = {
					pageNum: 1,
					pageSize: 10,
					// 按时间倒序排列
					orderByColumn: 'createTime',
					isAsc: 'desc'
				};

				listOpenlock(query).then(response => {
					if (response.code === 200) {
						console.log('获取开门记录成功：', response.rows.length);
						// 转换API返回的数据为recentLogs需要的格式
						this.recentLogs = response.rows.map(item => {
							// 格式化完整的时间
							const timeStr = item.createTime || item.lockTime;
							const dateTime = timeStr ? new Date(timeStr) : new Date();

							// 格式化为 yyyy-MM-dd HH:mm:ss
							const year = dateTime.getFullYear();
							const month = String(dateTime.getMonth() + 1).padStart(2, '0');
							const day = String(dateTime.getDate()).padStart(2, '0');
							const hours = String(dateTime.getHours()).padStart(2, '0');
							const minutes = String(dateTime.getMinutes()).padStart(2, '0');
							const seconds = String(dateTime.getSeconds()).padStart(2, '0');
							const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

							// 确定记录类型
							let type = 'unlock';
							if (item.type === '4' || (item.type && typeof item.type === 'string' && item
									.type.includes('异常'))) {
								type = 'warning';
							} else if (item.type === '5' || (item.type && typeof item.type === 'string' &&
									item.type.includes('系统'))) {
								type = 'system';
							}

							// 构建地址
							let address = item.cellName || '未知位置';
							if (item.unitName) address += item.unitName;
							if (item.floorName) address += item.floorName;
							if (item.roomName) address += item.roomName;

							// 获取用户名和电话
							let userInfo = item.remark;
							if (item.username && item.username !== 'null') {
								userInfo = item.username;
								// 添加完整电话
								if (item.userPhone) {
									userInfo += ` (${item.userPhone})`;
								} else if (item.phone) {
									userInfo += ` (${item.phone})`;
								}
							} else if (item.userPhone) {
								userInfo = `用户 ${item.userPhone}`;
							} else if (item.phone) {
								userInfo = `用户 ${item.phone}`;
							}

							// 获取开门方�?
							let actionType = '开门';
							if (item.type === '1') actionType = '密码开门';
							else if (item.type === '2') actionType = '门卡开门';
							else if (item.type === '3') actionType = '系统开门';
							else if (item.type === '4') actionType = '告警';
							else if (item.type === '5') actionType = '系统操作';
							else if (item.type === '6') actionType = '远程开门';
							else if (item.action) actionType = item.action;

							return {
								time: timeString,
								type: type,
								content: `${address} - ${userInfo} ${actionType}`
							};
						});

						// 成功获取日志后，重新启动滚动效果
						this.$nextTick(() => {
							// 先停止现有滚动（如果有）
							this.stopLogScroll();
							// 重新启动滚动
							this.startLogScroll();
						});
					} else {
						this.$message.error('获取开门记录失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取开门记录出错：', error);
				});
			},

			// 获取仪表盘信�?
			getDashboardInfo() {
				info({}).then(response => {
					if (response.code === 200) {
						this.dashboardInfo = response.data;

						// 更新收益数据
						if (this.dashboardInfo.incomeData) {
							this.incomeStats.total = this.dashboardInfo.incomeData.totalIncome || 0;
							this.incomeStats.rental = this.dashboardInfo.incomeData.rentalIncome || 0;
							this.incomeStats.deposit = this.dashboardInfo.incomeData.depositIncome || 0;
							this.incomeStats.service = this.dashboardInfo.incomeData.serviceIncome || 0;
						}

						// 更新其他相关数据
						// ...
					} else {
						this.$message.error('获取仪表盘信息失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取仪表盘信息出错：', error);
				});
			},

			// 获取闲置房数�?- 不再需要单独请求，从roomStatistics中获�?
			getVacantCount() {
				selectXianZhiCount({}).then(response => {
					if (response.code === 200) {
						this.roomStats.vacant = response.data || 0;
					} else {
						this.$message.error('获取闲置房数量失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取闲置房数量出错：', error);
				});
			},

			// 获取设备被撬数量
			getTamperedCount() {
				gaoJinCount({}).then(response => {
					if (response.code === 200) {
						this.roomStats.tampered = response.data.smartBQ || 0;
					} else {
						this.$message.error('获取设备被撬数量失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取设备被撬数量出错：', error);
				});
			},

			// 获取校区数据
			getCellList() {
				listCell2({}).then(response => {
					if (response.code === 200) {
						console.log('成功获取校区数据:', response.rows.length);
						this.cellList = response.rows;

						// 如果地图已加载，则添加标记点
						if (this.map) {
							console.log('地图已加载，添加标记点');
							this.addMarkers();
						} else {
							console.log('地图未加载，稍后添加标记点');
							// 如果地图还没加载，延迟初始化地图
							setTimeout(() => {
								if (!this.map) {
									this.loadBaiduMapScript();
								}
							}, 1000);
						}
					} else {
						this.$message.error('获取校区数据失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取校区数据出错：', error);
					this.$message.error('获取校区数据出错');
				});
			},

			// 加载百度地图脚本
			loadBaiduMapScript() {
				// 如果地图已经存在，先销毁
				if (this.map) {
					this.destroyMap();
				}

				// 清除可能存在的全局回调
				if (window.onBMapCallback) {
					delete window.onBMapCallback;
				}
				if (window.onBMapError) {
					delete window.onBMapError;
				}

				// 先定义全局回调函数，确保API加载完成后能找到此函�?
				window.onBMapCallback = () => {
					console.log("百度地图API加载完成");
					// 清除超时定时器
					if (this.mapLoadTimeout) {
						clearTimeout(this.mapLoadTimeout);
						this.mapLoadTimeout = null;
					}
					// 延迟初始化，确保DOM和API都已准备就绪
					setTimeout(() => {
						this.initBaiduMap();
					}, 500);
				};

				// 设置加载超时
				this.mapLoadTimeout = setTimeout(() => {
					console.error("百度地图API加载超时");
					this.handleMapLoadError();
				}, 10000); // 10秒超时

				// 添加错误处理
				window.onBMapError = (error) => {
					console.error("百度地图API加载失败:", error);
					this.handleMapLoadError();
				};

				// 使用2D版本的百度地图API，添加错误处理
				const script = document.createElement('script');
				script.type = 'text/javascript';
				script.src =
					`https://api.map.baidu.com/api?v=3.0&ak=c2DCFwjXGISIWFoRfrNHkUT7&callback=onBMapCallback`;

				// 添加加载错误处理
				script.onerror = () => {
					console.error("百度地图脚本加载失败");
					this.handleMapLoadError();
				};

				document.head.appendChild(script);
			},

			// 处理地图加载错误
			handleMapLoadError() {
				console.log('处理地图加载错误，尝试重试...');

				// 显示错误提示
				const loadingElement = document.querySelector('.map-loading');
				if (loadingElement) {
					loadingElement.innerHTML = `
            <i class="el-icon-warning" style="color: #E6A23C"></i>
            <span>地图加载失败，正在重试...</span>
          `;
				}

				// 延迟重试
				setTimeout(() => {
					this.retryMapLoad();
				}, 2000);
			},

			// 重试地图加载
			retryMapLoad() {
				console.log('重试地图加载...');

				// 清除可能存在的旧脚本
				const oldScripts = document.querySelectorAll('script[src*="api.map.baidu.com"]');
				oldScripts.forEach(script => script.remove());

				// 清除全局回调
				if (window.onBMapCallback) {
					delete window.onBMapCallback;
				}
				if (window.onBMapError) {
					delete window.onBMapError;
				}

				// 重新加载
				this.loadBaiduMapScript();
			},

			// 检查WebGL支持
			checkWebGLSupport() {
				try {
					const canvas = document.createElement('canvas');
					const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
					return !!gl;
				} catch (e) {
					console.error('WebGL检查失败:', e);
					return false;
				}
			},

			// 销毁地图实例
			destroyMap() {
				if (this.map) {
					try {
						// 清除所有覆盖物
						this.map.clearOverlays();
						// 销毁地图实例
						this.map.destroy();
						this.map = null;
						console.log('地图实例已销毁');
					} catch (error) {
						console.error('销毁地图实例失败:', error);
					}
				}
			},

			// 强制刷新地图瓦片
			forceRefreshMapTiles() {
				if (!this.map) return;

				console.log('强制刷新地图瓦片...');

				// 方法1: 通过改变缩放级别强制刷新
				const currentZoom = this.map.getZoom();
				this.map.setZoom(currentZoom + 0.1);
				setTimeout(() => {
					this.map.setZoom(currentZoom);
				}, 100);

				// 方法2: 通过改变中心点强制刷新
				setTimeout(() => {
					const center = this.map.getCenter();
					this.map.panTo(center);
				}, 200);

				// 方法3: 强制重新渲染
				setTimeout(() => {
					this.map.refresh();
				}, 300);
			},

			// 检查地图瓦片是否正确加载
			checkMapTilesLoaded() {
				if (!this.map) return;

				// 检查地图容器是否有内容
				const mapContainer = document.getElementById('baiduMap');
				if (mapContainer) {
					const canvas = mapContainer.querySelector('canvas');
					if (canvas) {
						const ctx = canvas.getContext('2d');
						if (ctx) {
							const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
							const data = imageData.data;
							let hasContent = false;

							// 检查是否有非透明像素
							for (let i = 3; i < data.length; i += 4) {
								if (data[i] > 0) {
									hasContent = true;
									break;
								}
							}

							if (!hasContent) {
								console.warn('地图瓦片可能未正确加载，尝试重新刷新');
								this.forceRefreshMapTiles();
							} else {
								console.log('地图瓦片加载正常');
							}
						}
					}
				}
			},

			// 初始化百度地�?
			initBaiduMap() {
				if (typeof BMap === 'undefined') {
					console.error('百度地图API加载失败');
					this.handleMapLoadError();
					return;
				}

				console.log("开始初始化百度地图2D版本");

				this.$nextTick(() => {
					try {
						const mapContainer = document.getElementById('baiduMap');
						const loadingElement = document.querySelector('.map-loading');

						if (!mapContainer) {
							console.error('地图容器未找到');
							// 延迟重试
							setTimeout(() => {
								this.initBaiduMap();
							}, 500);
							return;
						}

						// 检查容器尺寸
						const rect = mapContainer.getBoundingClientRect();
						if (rect.width === 0 || rect.height === 0) {
							console.log('地图容器尺寸为0，等待容器渲染完成...');
							setTimeout(() => {
								this.initBaiduMap();
							}, 300);
							return;
						}

						// 创建地图实例前确保容器可见
						mapContainer.style.display = 'block';

						this.map = new BMap.Map('baiduMap', {
    enableMapClick: false // 禁用地图点击事件，提高性能
});

						// 设置地图加载完成的回�?
						this.map.addEventListener('tilesloaded', () => {
							// 隐藏加载动画
							if (loadingElement) {
								loadingElement.style.display = 'none';
							}
							// 显示地图
							mapContainer.classList.add('loaded');
							console.log('地图瓦片加载完成');
							
							// 如果已有校区数据，立即添加标记点
							if (this.cellList && this.cellList.length > 0) {
								this.addMarkers();
							}
						});

						// 添加瓦片加载失败的处理
						this.map.addEventListener('tilesloaderror', () => {
							console.warn('地图瓦片加载失败，尝试重新加载');
							setTimeout(() => {
								this.forceRefreshMapTiles();
							}, 1000);
						});

						// 如果已有校区数据，使用第一个校区的位置作为中心�?
						if (this.cellList && this.cellList.length > 0) {
							const firstCell = this.cellList[0];
							let centerLng = 112.982279; // 默认经度
							let centerLat = 28.19409; // 默认纬度

							// 尝试从校区数据中获取经纬�?
							if (firstCell.longitude && firstCell.latitude) {
								centerLng = parseFloat(firstCell.longitude);
								centerLat = parseFloat(firstCell.latitude);
							} else if (firstCell.lng && firstCell.lat) {
								centerLng = parseFloat(firstCell.lng);
								centerLat = parseFloat(firstCell.lat);
							} else if (firstCell.lon && firstCell.lat) {
								centerLng = parseFloat(firstCell.lon);
								centerLat = parseFloat(firstCell.lat);
							}

							const point = new BMap.Point(centerLng, centerLat);
							this.map.centerAndZoom(point, 14);
						} else {
							// 如果没有校区数据，使用默认中心点
							const point = new BMap.Point(112.982279, 28.19409);
							this.map.centerAndZoom(point, 12);
						}

						// 使用深色主题
						this.map.setMapStyleV2({
							styleJson: this.darkBlueStyle
						});

						// 禁用一些不必要的交互，提高性能
						this.map.disableDoubleClickZoom();
						this.map.enableScrollWheelZoom();

						// 地图初始化完成，不需要强制刷新瓦片

						// 如果已经获取到校区数据，添加标记�?
						if (this.cellList && this.cellList.length > 0) {
							// 延迟添加标记点，确保地图完全加载
							setTimeout(() => {
								this.addMarkers();
							}, 300);
						}

						// 隐藏百度地图的Logo和版权信�?
						// this.$nextTick(() => {
						// 	const elements = document.getElementsByClassName("BMap_cpyCtrl");
						// 	const scaleElements = document.getElementsByClassName("BMap_scaleCtrl");
						// 	const logoControl = document.getElementsByClassName("BMap_logoControl");
						// 	const anchorBL = document.querySelector('.anchorBL');

						// 	[].forEach.call([...elements, ...scaleElements, ...logoControl], el => {
						// 		if (el) el.style.display = "none";
						// 	});
						// 	if (anchorBL) anchorBL.style.display = 'none';
						// });

					} catch (error) {
						console.error('地图初始化失败：', error);
						this.handleMapLoadError();
					}
				});
			},

			// 添加标记�?
			addMarkers() {
				if (!this.map) {
					console.error('地图未初始化，无法添加标记点');
					return;
				}

				if (!this.cellList || this.cellList.length === 0) {
					console.warn('校区数据为空，无法添加标记点');
					return;
				}

				console.log('开始添加校区标记点，数据量：', this.cellList.length);

				// 清除已有的覆盖物
				this.map.clearOverlays();

				// 设置自动调整视图以包含所有标记点
				let bounds = null;

				// 为每个校区添加标记点
				this.cellList.forEach((cell, index) => {
					try {
						// 从多个可能的字段中获取经纬度和名�?
						let lng = parseFloat(cell.longitude || cell.lng || cell.lon);
						let lat = parseFloat(cell.latitude || cell.lat);
						const cellName = cell.cellName || cell.name || '未命名校区';

						if (isNaN(lng) || isNaN(lat)) {
							console.warn(`校区经纬度数据无? ${cellName}`);
							return;
						}

						const point = new BMap.Point(lng, lat);

						// 创建标记�?
						const marker = new BMap.Marker(point);

						// 创建文字标签
						const labelContent = cellName;
						const label = new BMap.Label(labelContent);

						// 设置标签的偏移量，使其位于标记点上方
						label.setOffset(new BMap.Size(-labelContent.length * 6, -30));

						// 设置标签样式
						const labelStyle = {
							color: '#ffffff',
							backgroundColor: 'rgba(59, 128, 255, 0.8)',
							border: 'none',
							fontSize: '14px',
							padding: '5px 8px',
							borderRadius: '4px',
							fontFamily: 'Microsoft YaHei',
							userSelect: 'none',
							zIndex: 1000,
							whiteSpace: 'nowrap'
						};

						label.setStyle(labelStyle);

						// 将标签添加到标记�?
						marker.setLabel(label);

						// 添加点击事件
						marker.addEventListener('click', () => {
							this.$confirm(`是否要进入${cellName}的房间列表？`, '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'info',
								customClass: 'map-confirm-dialog'
							}).then(() => {
								this.$router.push({
									path: '/room',
									query: {
										cellId: cell.id
									}
								});
							}).catch(() => {});
						});

						// 添加到地�?
						this.map.addOverlay(marker);

						// 更新边界
						if (!bounds) {
							bounds = new BMap.Bounds(point, point);
						} else {
							bounds.extend(point);
						}

					} catch (error) {
						console.error(`添加标记点失败：`, cell, error);
					}
				});

				// 调整地图视图以包含所有标记点
				if (bounds && !bounds.isEmpty()) {
					// 使用更合适的边距和缩放因子
					this.map.setViewport(bounds, {
						margins: [20, 20, 20, 20], // 减少边距
						zoomFactor: 0.8 // 稍微缩小一点，确保所有标记点都在视野内
					});
					console.log('地图视图已调整到包含所有标记点');
				} else if (this.cellList && this.cellList.length > 0) {
					// 如果没有有效的边界，但有校区数据，则定位到第一个校区
					this.centerMapToFirstCell();
				}

				// 标记点添加完成
				console.log('所有标记点已添加到地图');
			},

			// 定位地图到第一个校区
			centerMapToFirstCell() {
				if (!this.map || !this.cellList || this.cellList.length === 0) {
					console.warn('地图或校区数据不可用，无法定位到第一个校区');
					return;
				}

				const firstCell = this.cellList[0];
				let centerLng = 112.982279; // 默认经度
				let centerLat = 28.19409; // 默认纬度

				// 尝试从校区数据中获取经纬度
				if (firstCell.longitude && firstCell.latitude) {
					centerLng = parseFloat(firstCell.longitude);
					centerLat = parseFloat(firstCell.latitude);
				} else if (firstCell.lng && firstCell.lat) {
					centerLng = parseFloat(firstCell.lng);
					centerLat = parseFloat(firstCell.lat);
				} else if (firstCell.lon && firstCell.lat) {
					centerLng = parseFloat(firstCell.lon);
					centerLat = parseFloat(firstCell.lat);
				}

				console.log(`定位地图到第一个校区: ${firstCell.cellName || firstCell.name}, 坐标: ${centerLng}, ${centerLat}`);

				const point = new BMap.Point(centerLng, centerLat);
				this.map.centerAndZoom(point, 14);

				// 定位后强制刷新瓦片
				setTimeout(() => {
					this.forceRefreshMapTiles();
				}, 300);

				// 延迟检查地图瓦片是否正确加载
				setTimeout(() => {
					this.checkMapTilesLoaded();
				}, 2000);
			},

			updateCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const weekday = weekdays[now.getDay()];

				this.currentTime = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${weekday}`;
			},

			initCharts() {
				// 在这里初始化各种图表
				// 实际项目中，可能需要从后端获取数据后再初始化图�?
				// 这里仅作为示例框�?
			},

			// 获取男女比例分布
			getSexRatio() {
				sexFenBu().then(response => {
					if (response && response.code === 200 && response.data) {
						// 将API返回的nv和nan映射到需要的female和male
						this.sexRatioData = {
							female: response.data.nv || 0,
							male: response.data.nan || 0
						};
						this.$nextTick(() => {
							this.initSexRatioChart();
						});
					} else {
						console.error("获取男女比例数据失败:", response);
					}
				}).catch(error => {
					console.error("获取男女比例数据出错:", error);
				});
			},

			// 初始化男女比例图表（使用新的展示方式，不再使用echarts�?
			initSexRatioChart() {
				// 现在使用自定义的HTML/CSS展示方式，不再需要echarts
				console.log('使用新的男女比例展示方式，不需要初始化图表');
				return;
			},

			// 获取3天未通讯设备数据
			getNoCommunicationList(reset = false) {
				if (this.noCommunicationLoading) return;

				this.noCommunicationLoading = true;

				if (reset) {
					this.noCommunicationPageNum = 1;
					this.noCommunicationList = [];
				}

				const params = {
					pageNum: this.noCommunicationPageNum,
					pageSize: this.noCommunicationPageSize
				};

				wujuzhuCount(params).then(response => {
					if (response.code === 200) {
						const newData = response.rows || [];
						this.noCommunicationTotal = response.total || 0;

						if (reset) {
							this.noCommunicationList = newData;
						} else {
							this.noCommunicationList = [...this.noCommunicationList, ...newData];
						}

						console.log('获取3天未通讯设备数据成功:', this.noCommunicationList.length, '总数:', this
							.noCommunicationTotal);
					} else {
						this.$message.error('获取3天未通讯设备数据失败：' + response.msg);
					}
				}).catch(error => {
					console.error('获取3天未通讯设备数据出错：', error);
				}).finally(() => {
					this.noCommunicationLoading = false;
				});
			},

			// 处理3天未通讯设备滚动加载
			handleNoCommunicationScroll(event) {
				const {
					scrollTop,
					scrollHeight,
					clientHeight
				} = event.target;
				if (scrollHeight - scrollTop <= clientHeight + 50 && !this.noCommunicationLoading) {
					if (this.noCommunicationList.length < this.noCommunicationTotal) {
						this.noCommunicationPageNum++;
						this.getNoCommunicationList();
					}
				}
			},

			// 格式化最后通讯时间
			formatLastCommunication(time) {
				if (!time) return '从未通讯';
				return this.parseTime(time);
			},

			// 获取开门方式统计数据
			getLockUsageData() {
				lockFangShiPie({}).then(response => {
					if (response.code === 200 && response.data) {
						this.lockUsageData = response.data.pieData || [];
						this.lockUsageTotal = response.data.total || 0;
						console.log('获取开门方式统计数据成功:', this.lockUsageData.length, '总数:', this.lockUsageTotal);
					} else {
						console.error('获取开门方式统计数据失败:', response.msg || '未知错误');
					}
				}).catch(error => {
					console.error('获取开门方式统计数据出错:', error);
				});
			},

			// 获取开门方式颜色
			getUsageColor(name) {
				const colorMap = {
					'密码': '#5D6CC6',
					'卡片': '#91CD75',
					'指纹': '#5470c6',
					'人脸': '#ee6666',
					'远程': '#3ba272',
					'系统': '#fc8452'
				};
				return colorMap[name] || '#909399';
			},

			// 获取开门方式图标
			getUsageIcon(name) {
				const iconMap = {
					'密码': 'el-icon-key',
					'卡片': 'el-icon-postcard',
					'指纹': 'el-icon-view',
					'人脸': 'el-icon-user',
					'远程': 'el-icon-mobile-phone',
					'系统': 'el-icon-more'
				};
				return iconMap[name] || 'el-icon-setting';
			},

			// 过滤日志类型
			filterLogs(category) {
				this.activeLogCategory = category;
			},

			// 获取日志图标
			getLogIcon(type) {
				switch (type) {
					case 'unlock':
						return 'el-icon-unlock';
					case 'warning':
						return 'el-icon-warning-outline';
					case 'system':
						return 'el-icon-setting';
					default:
						return 'el-icon-document';
				}
			},

			// 获取日志类型文本
			getLogTypeText(type) {
				switch (type) {
					case 'unlock':
						return '正常开门';
					case 'warning':
						return '异常警告';
					case 'system':
						return '系统操作';
					default:
						return '';
				}
			},

			// 添加一个默认类型，确保所有日志都有type属�?
			getRealLogs() {
				// 直接调用获取开门记录方�?
				this.getRecentOpenLogs();
			},

			// 导航到房源列表页�?
			navigateToRoomList(type) {
				this.$router.push({
					path: "/room",
					query: {
						type: type // 'all', 'rented', 'vacant'
					}
				});
			},

			// 导航到告警列表页�?
			navigateToWarningList(type) {
				this.$router.push({
					path: "/waringlist",
					query: {
						waringType: type === 'tampered' ? '2' : '1', // 2表示设备被撬�?表示故障上报
						state: '0' // 默认显示未处理的告警
					}
				});
			},

			// 导航到钥匙状态页�?
			navigateToKeyStatus(status) {
				this.$router.push({
					path: "/tenantkey",
					query: {
						waringType: status === 'expired' ? '2' : status === 'expiring' ? '1' : '0'
						// 移除 state 参数
					}
				});
			},
			// 获取系统设置
			getSystemSettings() {
				getInfo().then(response => {
					if (response.code === 200) {
						const settingData = response.setting || {}
						this.systemSettings = {
							sysTitle: settingData.sysTitle || '智能门锁管理系统',
							titleLogo: settingData.titleLogo,
							cmpName: settingData.cmpName || '湖南天网大数据管理有限公司'
						}
					}
				}).catch(error => {
					console.error("获取系统设置失败", error)
					// 设置默认?
					this.systemSettings = {
						sysTitle: '智能门锁管理系统',
						titleLogo: '',
						cmpName: '湖南天网大数据管理有限公司' // 添加默认公司名称
					}
				})
			},
			// ... 其他已有?methods

			// 开始日志自动滚?
			startLogScroll() {
				// 先停止任何可能存在的滚动定时?
				this.stopLogScroll();

				console.log('尝试启动日志滚动');

				// 先检查是否有足够的内容可滚动
				this.$nextTick(() => {
					if (!this.$refs.logScrollWrapper) {
						console.warn('日志容器引用不存在，无法滚动');
						return;
					}

					const scrollEl = this.$refs.logScrollWrapper;
					const isScrollable = scrollEl.scrollHeight > scrollEl.clientHeight;

					if (!isScrollable) {
						console.warn('没有足够的内容可滚动');
						return;
					}

					console.log('日志内容可滚动，开始滚动');

					// 确保滚动元素样式正确
					scrollEl.style.scrollBehavior = 'smooth';

					// 如果没有滚动过，先滚动一点以显示动效
					if (scrollEl.scrollTop === 0) {
						scrollEl.scrollTop = 1;
					}

					// 使用更直接的滚动方法：基于当前内容长度计算滚动速度
					const contentHeight = scrollEl.scrollHeight;
					const viewHeight = scrollEl.clientHeight;

					// 计算合适的滚动间隔，内容越多滚动越?
					const scrollSpeed = Math.max(20, Math.min(50, 30000 / contentHeight));

					this.logScrollInterval = setInterval(() => {
						if (this.isLogScrollPaused || !this.$refs.logScrollWrapper) return;

						const scrollEl = this.$refs.logScrollWrapper;
						const currentScroll = scrollEl.scrollTop;
						const maxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;

						// 如果已经滚动到底部，使用平滑动画回到顶部
						if (currentScroll >= maxScroll - 5) {
							// 先暂停动画效果，瞬间回到顶部
							scrollEl.style.scrollBehavior = 'auto';
							scrollEl.scrollTop = 0;
							// 重新启用平滑滚动效果
							setTimeout(() => {
								scrollEl.style.scrollBehavior = 'smooth';
							}, 100);
						} else {
							// 使用更明显的滚动步长
							scrollEl.scrollTop = currentScroll + 1;
						}
					}, scrollSpeed); // 根据内容动态调整滚动速度

					console.log(`日志滚动已启动，速度: ${scrollSpeed}ms/像素`);
				});
			},

			// 停止日志滚动
			stopLogScroll() {
				if (this.logScrollInterval) {
					clearInterval(this.logScrollInterval);
					this.logScrollInterval = null;
				}
			},

			// 暂停日志滚动（鼠标进入时?
			pauseLogScroll() {
				this.isLogScrollPaused = true;
			},

			// 恢复日志滚动（鼠标离开时）
			resumeLogScroll() {
				this.isLogScrollPaused = false;
			},
			// 获取设备电量分布
			getDeviceBatteryDistribution() {
				deviceBatteryDistribution({}).then(response => {
					if (response.code === 200) {
						const data = response.data || {};
						this.batteryDistribution = {
							veryLow: data.veryLow || 0,
							low: data.low || 0,
							medium: data.medium || 0,
							high: data.high || 0
						};
					} else {
						console.error("获取设备电量分布数据失败:", response);
					}
				}).catch(error => {
					console.error("获取设备电量分布数据出错:", error);
				});
			},
		},
		computed: {
			// 过滤后的日志记录
			filteredLogs() {
				// 不再使用activeLogCategory进行过滤，直接返回所有日志
				return this.recentLogs;
			},

			// 设备总数
			totalDeviceCount() {
				return this.onlineCount + this.offlineCount;
			},

			// 设备在线百分?
			deviceOnlinePercentage() {
				const total = this.totalDeviceCount;
				if (total === 0) return 0;
				return Math.round((this.onlineCount / total) * 100);
			},

			// 总人?
			totalPeople() {
				return (this.sexRatioData.male || 0) + (this.sexRatioData.female || 0);
			},

			// 男性百分比
			malePercent() {
				if (this.totalPeople === 0) return 0;
				return Math.round((this.sexRatioData.male || 0) / this.totalPeople * 100);
			},

			// 女性百分比
			femalePercent() {
				if (this.totalPeople === 0) return 0;
				return Math.round((this.sexRatioData.female || 0) / this.totalPeople * 100);
			},

			// 所有设备总数（电量统计用?
			totalBatteryDevices() {
				return this.batteryDistribution.veryLow +
					this.batteryDistribution.low +
					this.batteryDistribution.medium +
					this.batteryDistribution.high;
			},

			// 非常低电量设备百分比 (<10%)
			veryLowBatteryPercent() {
				if (this.totalBatteryDevices === 0) return 0;
				return Math.round((this.batteryDistribution.veryLow / this.totalBatteryDevices) * 100);
			},

			// 低电量设备百分比 (10-20%)
			lowBatteryPercent() {
				if (this.totalBatteryDevices === 0) return 0;
				return Math.round((this.batteryDistribution.low / this.totalBatteryDevices) * 100);
			},

			// 中等电量设备百分�?(20-50%)
			mediumBatteryPercent() {
				if (this.totalBatteryDevices === 0) return 0;
				return Math.round((this.batteryDistribution.medium / this.totalBatteryDevices) * 100);
			},

			// 高电量设备百分比 (50-100%)
			highBatteryPercent() {
				if (this.totalBatteryDevices === 0) return 0;
				return Math.round((this.batteryDistribution.high / this.totalBatteryDevices) * 100);
			},
		},
	};
</script>

<style scoped lang="scss">
	.dashboard-container {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
		color: #fff;
		font-family: "Microsoft YaHei", sans-serif;

		/* 自定义滚动条样式 */
		&::-webkit-scrollbar {
			width: 8px;
			height: 8px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(6, 21, 55, 0.5);
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(59, 128, 255, 0.3);
			border-radius: 4px;
			transition: all 0.3s ease;
		}

		&::-webkit-scrollbar-thumb:hover {
			background: rgba(59, 128, 255, 0.5);
		}
	}

	.dashboard-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #0a1f4a;
		background-image: radial-gradient(circle at 5% 15%, #1a3d7a 0%, #0a1f4a 50%);
		z-index: -1;

		&::before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: url('');
			opacity: 0.02;
		}
	}

	/* 头部样式 */
	.dashboard-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		padding: 0 20px;
		background-color: rgba(26, 61, 122, 0.6);
		border-bottom: 1px solid rgba(79, 148, 255, 0.3);

		.header-left {
			display: flex;
			align-items: center;
			gap: 20px;

			.logo-image {
				height: 32px;
				width: auto;
				margin-right: 10px;
				object-fit: contain;
			}

			.system-title {
				text-decoration: none;

				.title-wrapper {
					display: flex;
					flex-direction: column;
					gap: 2px;

					.cn-text {
						font-size: 18px;
						font-weight: 600;
						color: #fff;
						letter-spacing: 1px;
						transition: color 0.3s ease;
					}

					.en-text {
						font-size: 12px;
						color: rgba(255, 255, 255, 0.7);
						letter-spacing: 0.5px;
						text-transform: uppercase;
						transform: translateY(0);
						opacity: 0.7;
						transition: all 0.3s ease;
					}
				}

				&:hover {
					.cn-text {
						color: #2d8cf0;
						text-shadow: 0 0 8px rgba(45, 140, 240, 0.3);
					}

					.en-text {
						transform: translateY(2px);
						opacity: 1;
						color: #40c9ff;
					}
				}
			}
		}

		.header-center {
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;

			.main-title {
				position: relative;
				text-align: center;
				padding: 10px 0;

				.title-text {
					font-size: 32px;
					font-weight: bold;
					background: linear-gradient(120deg,
							#ffffff 0%,
							#2d8cf0 50%,
							#ffffff 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					text-shadow: 0 2px 15px rgba(45, 140, 240, 0.2);
					letter-spacing: 4px;
					position: relative;
					padding: 0 60px;

					&::before,
					&::after {
						content: '';
						position: absolute;
						top: 50%;
						width: 50px;
						height: 2px;
						background: linear-gradient(90deg,
								transparent,
								rgba(45, 140, 240, 0.8),
								transparent);
						transform: translateY(-50%);
					}

					&::before {
						left: -10px;
					}

					&::after {
						right: -10px;
					}
				}
			}
		}

		.header-right {
			text-align: right;

			.company-name {
				font-size: 14px;
				margin-bottom: 5px;
				color: #ccc;
			}

			.current-time {
				font-size: 14px;
				color: #3b80ff;
			}
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 0.5;
		}

		70% {
			transform: scale(2);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 0;
		}
	}

	/* 内容区样?*/
	.dashboard-content {
		display: flex;
		height: calc(100vh - 60px);
		padding: 15px;
		gap: 15px;
	}

	.panel {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.left-panel,
	.right-panel {
		width: 25%;
	}

	.center-panel {
		width: 50%;
	}

	.panel-item {
		flex: 1;
		background-color: rgba(26, 61, 122, 0.6);
		border: 1px solid rgba(79, 148, 255, 0.3);
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.panel-header {
		padding: 10px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: rgba(33, 73, 141, 0.6);
		border-bottom: 1px solid rgba(79, 148, 255, 0.3);

		.panel-title {
			font-size: 16px;
			font-weight: bold;
			color: #3b80ff;

			&::before {
				content: "";
				display: inline-block;
				width: 3px;
				height: 14px;
				background-color: #3b80ff;
				margin-right: 8px;
				vertical-align: middle;
			}
		}

		.panel-subtitle {
			font-size: 12px;
			color: #6b91c7;
		}
	}

	.panel-content {
		flex: 1;
		padding: 10px;
		overflow: hidden;
	}

	/* 状态卡片样?*/
	.status-card {
		display: flex;
		align-items: center;
		margin-bottom: 15px;

		.status-icon {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			margin-right: 10px;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 12px;
				height: 12px;
				border-radius: 50%;
			}

			&.online {
				background-color: rgba(24, 210, 110, 0.1);
				border: 1px solid rgba(24, 210, 110, 0.3);

				&::after {
					background-color: #18d26e;
					box-shadow: 0 0 8px #18d26e;
				}
			}

			&.offline {
				background-color: rgba(108, 117, 125, 0.1);
				border: 1px solid rgba(108, 117, 125, 0.3);

				&::after {
					background-color: #6c757d;
					box-shadow: 0 0 8px #6c757d;
				}
			}

			&.warning {
				background-color: rgba(255, 152, 0, 0.1);
				border: 1px solid rgba(255, 152, 0, 0.3);

				&::after {
					background-color: #ff9800;
					box-shadow: 0 0 8px #ff9800;
				}
			}
		}

		.status-info {
			.status-value {
				font-size: 22px;
				font-weight: bold;
				color: #fff;
			}

			.status-label {
				font-size: 12px;
				color: #6b91c7;
			}
		}
	}

	/* 图表容器样式 */
	.chart-container {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 18, 64, 0.3);
		border-radius: 2px;
	}

	/* 地图容器样式 */
	.map-container {
		height: 60%;
		position: relative;
		background-color: #061E4E;
		/* 与应用整体风格一致的深色背景 */
	}

	#baiduMap {
		width: 100%;
		height: 100%;
		min-height: 400px;
		/* 确保最小高度 */
		background-color: #061E4E;
		/* 确保地图容器也有相同的背景色 */
		opacity: 0;
		transition: opacity 0.3s ease;
		position: relative;
	}

	#baiduMap.loaded {
		opacity: 1;
	}

	/* 地图加载动画 */
	.map-loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		z-index: 1;
	}

	.map-loading i {
		font-size: 40px;
		color: #3b80ff;
		animation: rotate 1.5s linear infinite;
	}

	.map-loading span {
		display: block;
		margin-top: 10px;
		color: #6b91c7;
		font-size: 14px;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 隐藏百度地图logo */
	.anchorBL {
		display: none !important;
	}

	/* 数据卡片样式 */
	.data-cards {
		display: flex;
		gap: 20px;

		.data-card {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 20px;
			background: linear-gradient(135deg, rgba(33, 73, 141, 0.8) 0%, rgba(26, 61, 122, 0.8) 100%);
			border: 1px solid rgba(79, 148, 255, 0.3);
			border-radius: 12px;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			cursor: pointer;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, rgba(59, 128, 255, 0.1), transparent);
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
				border-color: rgba(79, 148, 255, 0.5);

				&::before {
					opacity: 1;
				}

				.card-icon {
					transform: scale(1.1) rotate(10deg);
					background-color: rgba(79, 148, 255, 0.3);
				}

				.card-value {
					color: #3b80ff;
					text-shadow: 0 0 10px rgba(59, 128, 255, 0.3);
				}
			}

			.card-icon {
				width: 50px;
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: rgba(79, 148, 255, 0.2);
				border-radius: 12px;
				margin-right: 15px;
				position: relative;
				transition: all 0.3s ease;

				i {
					font-size: 22px;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					width: 100%;
					position: relative;
					z-index: 1;
					transition: all 0.3s ease;
				}

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					border-radius: 12px;
					background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
					opacity: 0;
					transition: opacity 0.3s ease;
				}
			}

			&:hover {
				.card-icon {
					transform: scale(1.05);

					&::before {
						opacity: 1;
					}

					i {
						transform: scale(1.1);
					}
				}
			}

			// 为不同类型的卡片设置不同的图标颜?
			&:nth-child(1) .card-icon {
				background: rgba(79, 148, 255, 0.2);

				i {
					color: #4f94ff;
				}
			}

			&:nth-child(2) .card-icon {
				background: rgba(24, 210, 110, 0.1);

				i {
					color: #18d26e;
				}
			}

			&:nth-child(3) .card-icon {
				background: rgba(255, 212, 59, 0.1);

				i {
					color: #ffd43b;
				}
			}

			&:nth-child(4) .card-icon {
				background: rgba(255, 107, 107, 0.1);

				i {
					color: #ff6b6b;
				}
			}

			.card-info {
				flex: 1;

				.card-value {
					font-size: 28px;
					font-weight: bold;
					color: #fff;
					margin-bottom: 5px;
					transition: all 0.3s ease;
					display: flex;
					align-items: baseline;

					&::after {
						content: '';
						font-size: 14px;
						margin-left: 5px;
						opacity: 0.7;
					}
				}

				.card-label {
					font-size: 14px;
					color: #6b91c7;
					display: flex;
					align-items: center;

					&::before {
						content: '';
						display: inline-block;
						width: 6px;
						height: 6px;
						background-color: #4f94ff;
						border-radius: 50%;
						margin-right: 8px;
						box-shadow: 0 0 8px #4f94ff;
					}
				}
			}
		}
	}

	/* 日志容器样式修正 */
	.log-container {
		height: calc(100% - 45px) !important;
		/* 确保高度正确 */
		padding: 0 !important;
		position: relative;
		overflow: hidden;
		/* 防止自身滚动 */
	}

	/* 新增滚动包装?*/
	.log-scroll-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 5px;
		scroll-behavior: smooth;
		/* 添加平滑滚动效果 */
		transition: scrollTop 0.5s ease-in-out, background-color 0.3s ease;
		/* 添加额外的过渡效?*/

		&:hover {
			background-color: rgba(79, 148, 255, 0.08);
			/* 悬停时轻微变?*/
		}

		/* 滚动条样?*/
		&::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(6, 21, 55, 0.5);
			border-radius: 3px;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(59, 128, 255, 0.3);
			border-radius: 3px;
			transition: all 0.3s ease;
		}

		&::-webkit-scrollbar-thumb:hover {
			background: rgba(59, 128, 255, 0.5);
		}
	}

	/* 确保面板高度 */
	.panels-row {
		display: flex;
		gap: 20px;
		width: 100%;
		height: 390px;
		/* 固定高度 */
	}

	/* 修改日志面板和空置面板样?*/
	.logs-panel,
	.vacancy-panel {
		flex: 1;
		height: 100% !important;
		/* 使用100%继承父容器高?*/
		margin: 0 !important;
	}

	/* 日志项样式优?*/
	.log-item {
		display: flex;
		padding: 12px 15px;
		border-bottom: 1px solid rgba(59, 128, 255, 0.15);
		transition: all 0.3s ease;
		margin-bottom: 5px;
		opacity: 0.85;
		/* 轻微降低不在视图焦点的项目透明?*/
		transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
		transform: translateX(0);
		/* 为动画设置初始状?*/
		animation: fadeInRight 0.5s ease-out;
		/* 新增渐入动画 */

		&:hover {
			background-color: rgba(59, 128, 255, 0.15);
			opacity: 1;
			transform: translateX(-2px);
			/* 轻微右移效果 */
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
		}

		&.unlock .log-icon {
			color: #18d26e;
			background-color: rgba(24, 210, 110, 0.1);
		}

		&.warning .log-icon {
			color: #ff9800;
			background-color: rgba(255, 152, 0, 0.1);
		}

		&.system .log-icon {
			color: #3b80ff;
			background-color: rgba(59, 128, 255, 0.1);
		}
	}

	.log-icon {
		flex: 0 0 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		font-size: 18px;
	}

	.log-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.log-header {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.log-time {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.6);
		margin-right: 10px;
	}

	.log-type {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 10px;

		&.unlock {
			background-color: rgba(24, 210, 110, 0.1);
			color: #18d26e;
		}

		&.warning {
			background-color: rgba(255, 152, 0, 0.1);
			color: #ff9800;
		}

		&.system {
			background-color: rgba(59, 128, 255, 0.1);
			color: #3b80ff;
		}
	}

	.log-content {
		font-size: 14px;
		line-height: 1.5;
		color: #fff;
		opacity: 0.85;
		white-space: normal;
		word-break: break-word;
	}

	.empty-log {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: rgba(255, 255, 255, 0.3);
		padding: 20px 0;

		i {
			font-size: 32px;
			margin-bottom: 10px;
		}

		span {
			font-size: 14px;
		}
	}

	/* 告警列表样式 */
	.alarm-list {
		.alarm-item {
			display: flex;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1px solid rgba(59, 128, 255, 0.1);

			&:last-child {
				border-bottom: none;
			}

			.alarm-time {
				width: 80px;
				font-size: 12px;
				color: #6b91c7;
			}

			.alarm-info {
				flex: 1;

				.alarm-title {
					font-size: 14px;
					color: #fff;
					margin-bottom: 3px;
				}

				.alarm-address {
					font-size: 12px;
					color: #6b91c7;
				}
			}

			.alarm-type {
				padding: 2px 8px;
				border-radius: 4px;
				font-size: 12px;

				&.battery {
					background-color: rgba(255, 152, 0, 0.1);
					color: #ff9800;
					border: 1px solid rgba(255, 152, 0, 0.3);
				}

				&.security {
					background-color: rgba(244, 67, 54, 0.1);
					color: #f44336;
					border: 1px solid rgba(244, 67, 54, 0.3);
				}

				&.network {
					background-color: rgba(59, 128, 255, 0.1);
					color: #3b80ff;
					border: 1px solid rgba(59, 128, 255, 0.3);
				}

				&.offline {
					background-color: rgba(108, 117, 125, 0.1);
					color: #6c757d;
					border: 1px solid rgba(108, 117, 125, 0.3);
				}
			}
		}
	}

	/* 响应式布局调整 */
	@media screen and (max-width: 1440px) {
		.dashboard-content {
			padding: 10px;
			gap: 10px;
		}

		.panel-header .panel-title {
			font-size: 14px;
		}

		.status-card .status-info .status-value {
			font-size: 20px;
		}

		.data-cards .data-card .card-info .card-value {
			font-size: 20px;
		}
	}

	/* 续租业务样式 */
	.renewal-overview {
		display: flex;
		flex-direction: column;
		gap: 15px;
		height: 100%;
	}

	.renewal-stats {
		display: flex;
		justify-content: space-between;
	}

	.stats-item {
		background-color: rgba(6, 38, 89, 0.5);
		padding: 10px 15px;
		border-radius: 4px;
		text-align: center;
		flex: 1;
		margin: 0 5px;

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}

		.stat-value {
			font-size: 20px;
			font-weight: bold;
			color: #fff;
			margin-top: 5px;
		}

		.stat-label {
			font-size: 12px;
			color: #6b91c7;
		}
	}

	.renewal-chart {
		flex: 1;
	}

	.renewal-categories {
		.category-item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			&:last-child {
				margin-bottom: 0;
			}

			.category-icon {
				width: 12px;
				height: 12px;
				border-radius: 2px;
				margin-right: 10px;

				&.blue {
					background-color: #3b80ff;
				}

				&.green {
					background-color: #18d26e;
				}

				&.purple {
					background-color: #722ed1;
				}
			}

			.category-info {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.category-label {
					font-size: 12px;
					color: #ccc;
				}

				.category-value {
					font-size: 12px;
					color: #fff;
				}
			}
		}
	}

	/* 收益统计样式 */
	.revenue-content {
		display: flex;
		flex-direction: column;
		gap: 15px;
		height: 100%;
	}

	.total-revenue {
		background: linear-gradient(135deg, #114a8b, #1a73e8);
		padding: 15px;
		border-radius: 6px;
		text-align: center;

		.revenue-header {
			font-size: 14px;
			color: rgba(255, 255, 255, 0.7);
			margin-bottom: 5px;
		}

		.revenue-amount {
			font-size: 26px;
			font-weight: bold;
			color: #fff;
			margin-bottom: 5px;
		}

		.revenue-trend {
			font-size: 12px;
			display: inline-flex;
			align-items: center;

			i {
				margin-right: 4px;
				font-size: 14px;
			}

			&.positive {
				color: #18d26e;
			}

			&.negative {
				color: #f5222d;
			}
		}
	}

	.revenue-metrics {
		display: flex;
		gap: 10px;

		.metric-card {
			flex: 1;
			display: flex;
			align-items: center;
			background-color: rgba(6, 38, 89, 0.5);
			padding: 12px;
			border-radius: 4px;

			.metric-icon {
				width: 40px;
				height: 40px;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 10px;

				i {
					font-size: 20px;
				}

				&.rental {
					background-color: rgba(59, 128, 255, 0.2);
					color: #3b80ff;
				}

				&.deposit {
					background-color: rgba(255, 152, 0, 0.2);
					color: #ff9800;
				}

				&.service {
					background-color: rgba(114, 46, 209, 0.2);
					color: #722ed1;
				}
			}

			.metric-data {
				.metric-value {
					font-size: 16px;
					font-weight: bold;
					color: #fff;
				}

				.metric-label {
					font-size: 12px;
					color: #6b91c7;
				}
			}
		}
	}

	.revenue-chart {
		flex: 1;
	}

	/* 欠租状况样式 */
	.payment-status {
		display: flex;
		flex-direction: column;
		gap: 15px;
		height: 100%;
	}

	.status-summary {
		display: flex;
		justify-content: space-between;
		gap: 10px;

		.summary-item {
			flex: 1;
			background-color: rgba(6, 38, 89, 0.5);
			padding: 10px;
			border-radius: 4px;
			text-align: center;
			border-top: 3px solid transparent;

			&.critical {
				border-top-color: #f5222d;
			}

			&.warning {
				border-top-color: #ff9800;
			}

			&.overdue {
				border-top-color: #3b80ff;
			}

			.summary-value {
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				margin-bottom: 3px;
			}

			.summary-label {
				font-size: 12px;
				color: #6b91c7;
				margin-bottom: 3px;
			}

			.summary-desc {
				font-size: 11px;
				color: rgba(255, 255, 255, 0.5);
			}
		}
	}

	.overdue-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: rgba(6, 38, 89, 0.5);
		border-radius: 4px;
		overflow: hidden;

		.list-header {
			display: flex;
			justify-content: space-between;
			padding: 10px 15px;
			background-color: rgba(13, 43, 101, 0.5);
			font-size: 12px;
			color: #6b91c7;

			.header-item {
				&:nth-child(1) {
					flex: 2;
				}

				&:nth-child(2),
				&:nth-child(3) {
					flex: 1;
					text-align: center;
				}
			}
		}

		.list-content {
			flex: 1;
			overflow-y: auto;
			padding: 5px 0;

			.overdue-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 15px;
				border-bottom: 1px solid rgba(59, 128, 255, 0.1);

				&:last-child {
					border-bottom: none;
				}

				.item-address {
					flex: 2;
					font-size: 13px;
					color: #fff;
				}

				.item-months {
					flex: 1;
					text-align: center;
					font-size: 13px;

					&.critical {
						color: #f5222d;
					}

					&.warning {
						color: #ff9800;
					}
				}

				.item-amount {
					flex: 1;
					text-align: center;
					font-size: 13px;
					color: #fff;
				}
			}
		}
	}

	/* 图表占位样式 */
	.chart-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: rgba(255, 255, 255, 0.3);

		i {
			font-size: 32px;
			margin-bottom: 10px;
		}

		span {
			font-size: 14px;
		}
	}

	/* 地图特殊样式 */
	#baiduMap {
		background-color: #061537;
	}

	/* 信息窗口样式覆盖 */
	:global(.BMap_bubble_content) {
		color: #333;
	}

	/* 保持电池电量分布面板和实时操作日志面板高度一?*/
	.battery-panel,
	.logs-panel {
		height: 280px;
		flex: 0 0 auto;
	}

	/* 增强版状态卡片样?*/
	.status-card.enhanced {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		padding: 6px 8px;
		border-radius: 6px;
		background-color: rgba(6, 30, 78, 0.5);
		border: 1px solid rgba(59, 128, 255, 0.2);
		transition: all 0.3s ease;

		&:last-child {
			margin-bottom: 0;
		}

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
			border-color: rgba(59, 128, 255, 0.5);
		}

		.status-icon {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			margin-right: 8px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			i {
				font-size: 16px;
				color: #fff;
				z-index: 2;
			}

			&::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 90%;
				height: 90%;
				border-radius: 50%;
				z-index: 1;
			}

			&.online {
				background-color: rgba(24, 210, 110, 0.2);
				border: 1px solid rgba(24, 210, 110, 0.4);

				&::after {
					background: radial-gradient(circle, rgba(24, 210, 110, 0.8) 0%, rgba(24, 210, 110, 0.1) 70%);
					box-shadow: 0 0 15px rgba(24, 210, 110, 0.5);
				}
			}

			&.expiring {
				background-color: rgba(255, 152, 0, 0.2);
				border: 1px solid rgba(255, 152, 0, 0.4);

				&::after {
					background: radial-gradient(circle, rgba(255, 152, 0, 0.8) 0%, rgba(255, 152, 0, 0.1) 70%);
					box-shadow: 0 0 15px rgba(255, 152, 0, 0.5);
				}
			}

			&.warning {
				background-color: rgba(244, 67, 54, 0.2);
				border: 1px solid rgba(244, 67, 54, 0.4);

				&::after {
					background: radial-gradient(circle, rgba(244, 67, 54, 0.8) 0%, rgba(244, 67, 54, 0.1) 70%);
					box-shadow: 0 0 15px rgba(244, 67, 54, 0.5);
				}
			}
		}

		.status-info {
			flex: 1;

			.status-value {
				font-size: 20px;
				font-weight: bold;
				color: #fff;
				text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
				line-height: 1;
			}

			.status-label {
				font-size: 12px;
				color: #6b91c7;
				margin-top: 3px;
			}
		}
	}

	/* 钥匙状态卡片样?*/
	.key-status-content {
		padding: 20px;
		height: calc(100% - 45px);
		/* 减去header高度 */
		display: flex;
		align-items: center;
	}

	.key-status-container {
		display: flex;
		justify-content: space-between;
		gap: 15px;
		width: 100%;
	}

	.key-status-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px;
		border-radius: 10px;
		background-color: rgba(6, 30, 78, 0.5);
		border: 1px solid rgba(59, 128, 255, 0.2);
		transition: all 0.3s ease;
		flex: 1;
		height: 160px;
		text-align: center;
		position: relative;
		overflow: hidden;

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}

		&:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
			border-color: rgba(59, 128, 255, 0.5);
		}

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 3px;
		}

		&:nth-child(1)::before {
			background: linear-gradient(to right, #18d26e, #34c38f);
		}

		&:nth-child(2)::before {
			background: linear-gradient(to right, #ff9800, #f8b250);
		}

		&:nth-child(3)::before {
			background: linear-gradient(to right, #f44336, #f46a6a);
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			width: 80px;
			height: 80px;
			background: radial-gradient(circle, rgba(59, 128, 255, 0.1) 0%, rgba(6, 30, 78, 0) 70%);
			border-radius: 50%;
			z-index: 0;
		}
	}

	.key-icon {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15px;

		i {
			font-size: 24px;
			color: #fff;
			z-index: 2;
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			height: 90%;
			border-radius: 50%;
			z-index: 1;
		}

		&.online {
			background-color: rgba(24, 210, 110, 0.2);
			border: 1px solid rgba(24, 210, 110, 0.4);

			&::after {
				background: radial-gradient(circle, rgba(24, 210, 110, 0.8) 0%, rgba(24, 210, 110, 0.1) 70%);
				box-shadow: 0 0 15px rgba(24, 210, 110, 0.5);
			}
		}

		&.expiring {
			background-color: rgba(255, 152, 0, 0.2);
			border: 1px solid rgba(255, 152, 0, 0.4);

			&::after {
				background: radial-gradient(circle, rgba(255, 152, 0, 0.8) 0%, rgba(255, 152, 0, 0.1) 70%);
				box-shadow: 0 0 15px rgba(255, 152, 0, 0.5);
			}
		}

		&.warning {
			background-color: rgba(244, 67, 54, 0.2);
			border: 1px solid rgba(244, 67, 54, 0.4);

			&::after {
				background: radial-gradient(circle, rgba(244, 67, 54, 0.8) 0%, rgba(244, 67, 54, 0.1) 70%);
				box-shadow: 0 0 15px rgba(244, 67, 54, 0.5);
			}
		}
	}

	.key-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;

		.key-value {
			font-size: 26px;
			font-weight: bold;
			color: #fff;
			text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
			line-height: 1.2;
		}

		.key-label {
			font-size: 14px;
			color: #6b91c7;
			margin-top: 5px;
		}
	}

	/* 修改日志面板样式为半?*/
	.logs-panel,
	.vacancy-panel {
		height: 280px;
		flex: 1;
		margin: 0 !important;
		width: calc(50% - 10px) !important;
	}

	/* 实时开门记录和涉嫌空置面板容器样式 */
	.panel-item.logs-panel,
	.panel-item.vacancy-panel {
		display: block;
		vertical-align: initial;
		margin-right: 0;
		margin-left: 0;
	}

	.panel-item.vacancy-panel {
		margin-right: 0;
		margin-left: 10px;
	}

	/* 涉嫌空置面板样式 */
	.vacancy-container {
		height: calc(100% - 45px) !important;
		/* 确保高度正确 */
		padding: 0 !important;
		position: relative;
		overflow: hidden;
		/* 防止自身滚动 */
	}

	/* 添加空置滚动包装?*/
	.vacancy-scroll-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		overflow-x: hidden;
		padding: 10px;

		/* 滚动条样?*/
		&::-webkit-scrollbar {
			width: 6px;
			height: 6px;
		}

		&::-webkit-scrollbar-track {
			background: rgba(6, 21, 55, 0.5);
			border-radius: 3px;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(59, 128, 255, 0.3);
			border-radius: 3px;
			transition: all 0.3s ease;
		}

		&::-webkit-scrollbar-thumb:hover {
			background: rgba(59, 128, 255, 0.5);
		}
	}

	.no-communication-item {
		background: linear-gradient(135deg, rgba(255, 152, 0, 0.08) 0%, rgba(255, 87, 34, 0.03) 100%);
		border: 1px solid rgba(255, 152, 0, 0.15);
		border-radius: 8px;
		margin-bottom: 8px;
		padding: 12px;
		transition: all 0.3s ease;
		position: relative;
		display: flex;
		align-items: center;
		gap: 12px;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 3px;
			height: 100%;
			background: linear-gradient(180deg, #ff9800 0%, #ff5722 100%);
			border-radius: 0 2px 2px 0;
		}

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 4px 15px rgba(255, 152, 0, 0.12);
			border-color: rgba(255, 152, 0, 0.3);
		}

		.item-left {
			flex-shrink: 0;

			.item-icon {
				width: 32px;
				height: 32px;
				background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2px 8px rgba(255, 152, 0, 0.25);

				i {
					color: white;
					font-size: 14px;
				}
			}
		}

		.item-center {
			flex: 1;
			min-width: 0;

			.item-title {
				color: white;
				font-size: 14px;
				font-weight: 600;
				margin-bottom: 2px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.item-subtitle {
				color: rgba(255, 255, 255, 0.7);
				font-size: 12px;
				margin-bottom: 4px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.item-time {
				display: flex;
				align-items: center;
				color: rgba(255, 255, 255, 0.6);
				font-size: 11px;

				i {
					margin-right: 4px;
					color: #ff9800;
					font-size: 10px;
				}
			}
		}

		.item-right {
			flex-shrink: 0;

			.status-badge {
				background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
				color: white;
				padding: 3px 8px;
				border-radius: 12px;
				font-size: 10px;
				font-weight: 600;
				box-shadow: 0 1px 4px rgba(255, 87, 34, 0.25);
				white-space: nowrap;
			}
		}
	}

	.empty-vacancy {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: rgba(255, 255, 255, 0.3);
		margin: auto;

		i {
			font-size: 32px;
			margin-bottom: 10px;
		}
	}

	.empty-no-communication {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 200px;
		text-align: center;

		.empty-icon {
			width: 80px;
			height: 80px;
			background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;
			box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);

			i {
				font-size: 36px;
				color: white;
			}
		}

		.empty-title {
			color: white;
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 8px;
		}

		.empty-desc {
			color: rgba(255, 255, 255, 0.6);
			font-size: 14px;
		}
	}

	.lock-usage-container {
		height: calc(100% - 45px);
		overflow-y: auto;
		padding: 10px;

		.empty-lock-usage {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 200px;
			text-align: center;

			.empty-icon {
				width: 80px;
				height: 80px;
				background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;
				box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);

				i {
					font-size: 36px;
					color: white;
				}
			}

			.empty-title {
				color: white;
				font-size: 18px;
				font-weight: 600;
				margin-bottom: 8px;
			}

			.empty-desc {
				color: rgba(255, 255, 255, 0.6);
				font-size: 14px;
			}
		}

		.lock-usage-item {
			// background: rgba(255, 255, 255, 0.1);
			border-radius: 8px;
			margin-bottom: 12px;
			padding: 16px;
			display: flex;
			align-items: center;
			gap: 15px;
			transition: all 0.3s ease;

			&:hover {
				background: rgba(255, 255, 255, 0.15);
				transform: translateY(-2px);
			}

			.usage-left {
				flex-shrink: 0;

				.usage-icon {
					width: 45px;
					height: 45px;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

					i {
						font-size: 20px;
						color: white;
					}
				}
			}

			.usage-center {
				flex: 1;
				min-width: 0;

				.usage-name {
					color: white;
					font-size: 16px;
					font-weight: 600;
					margin-bottom: 4px;
				}

				.usage-value {
					color: rgba(255, 255, 255, 0.8);
					font-size: 14px;
					margin-bottom: 8px;
				}

				.usage-progress {
					display: flex;
					align-items: center;
					gap: 10px;

					.progress-bar {
						flex: 1;
						height: 6px;
						background: rgba(255, 255, 255, 0.2);
						border-radius: 3px;
						overflow: hidden;

						.progress-fill {
							height: 100%;
							border-radius: 3px;
							transition: width 0.5s ease;
						}
					}

					.progress-text {
						color: rgba(255, 255, 255, 0.7);
						font-size: 12px;
						font-weight: 600;
						min-width: 35px;
						text-align: right;
					}
				}
			}
		}
	}

	.loading-more {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		color: rgba(255, 255, 255, 0.6);
		font-size: 14px;

		i {
			margin-right: 8px;
			animation: rotate 1s linear infinite;
		}

		@keyframes rotate {
			from {
				transform: rotate(0deg);
			}

			to {
				transform: rotate(360deg);
			}
		}
	}

	span {
		font-size: 14px;
	}

	/* 修改现有实时日志容器样式 */
	.center-panel .panel-content {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}

	/* 面板行容器，使两个面板在同一?*/
	.panels-row {
		display: flex;
		gap: 20px;
		width: 100%;
	}

	/* 修改日志面板和空置面板样式*/
	.logs-panel,
	.vacancy-panel {
		flex: 1;
		height: 280px;
		margin: 0 !important;
		width: calc(50% - 10px) !important;
	}

	/* 美化面板标题 */
	.panel-header {
		.panel-title {
			i {
				margin-right: 8px;
				color: #409EFF;
				font-size: 16px;
			}
		}
	}

	/* 取消之前的内联块布局样式 */
	.panel-item.logs-panel,
	.panel-item.vacancy-panel {
		display: block;
		vertical-align: initial;
		margin-right: 0;
		margin-left: 0;
	}

	/* 日志分类标签 */
	.log-categories {
		display: flex;
		padding: 8px 15px;
		border-bottom: 1px solid rgba(59, 128, 255, 0.2);
		margin-bottom: 5px;
		overflow-x: auto;
	}

	.category-tag {
		display: inline-flex;
		align-items: center;
		padding: 4px 10px;
		margin-right: 10px;
		border-radius: 12px;
		font-size: 12px;
		cursor: pointer;
		transition: all 0.2s ease;
		color: rgba(255, 255, 255, 0.7);
		background-color: rgba(59, 128, 255, 0.1);
		white-space: nowrap;

		i {
			margin-right: 4px;
		}

		&:hover {
			background-color: rgba(59, 128, 255, 0.2);
		}

		&.active {
			background-color: rgba(59, 128, 255, 0.25);
			color: #fff;
			box-shadow: 0 0 8px rgba(59, 128, 255, 0.3);
		}
	}

	/* 日志列表样式 */
	.log-list {
		height: calc(100% - 45px);
		overflow-y: auto;
	}

	.log-container {
		display: flex;
		flex-direction: column;
		padding: 0;
		height: calc(100% - 45px);
		overflow: hidden;
	}

	.log-item {
		display: flex;
		padding: 12px 15px;
		border-bottom: 1px solid rgba(59, 128, 255, 0.15);
		transition: all 0.3s ease;

		&:hover {
			background-color: rgba(59, 128, 255, 0.1);
		}

		&.unlock .log-icon {
			color: #18d26e;
			background-color: rgba(24, 210, 110, 0.1);
		}

		&.warning .log-icon {
			color: #ff9800;
			background-color: rgba(255, 152, 0, 0.1);
		}

		&.system .log-icon {
			color: #3b80ff;
			background-color: rgba(59, 128, 255, 0.1);
		}
	}

	.log-icon {
		flex: 0 0 36px;
		height: 36px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12px;
		font-size: 18px;
	}

	.log-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.log-header {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.log-time {
		font-size: 12px;
		color: rgba(255, 255, 255, 0.6);
		margin-right: 10px;
	}

	.log-type {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 10px;

		&.unlock {
			background-color: rgba(24, 210, 110, 0.1);
			color: #18d26e;
		}

		&.warning {
			background-color: rgba(255, 152, 0, 0.1);
			color: #ff9800;
		}

		&.system {
			background-color: rgba(59, 128, 255, 0.1);
			color: #3b80ff;
		}
	}

	.log-content {
		font-size: 14px;
		line-height: 1.5;
		color: #fff;
		opacity: 0.85;
		white-space: normal;
		word-break: break-word;
	}

	.empty-log {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: rgba(255, 255, 255, 0.3);
		padding: 20px 0;

		i {
			font-size: 32px;
			margin-bottom: 10px;
		}

		span {
			font-size: 14px;
		}
	}

	/* 地图确认对话框样?*/
	::v-deep .map-confirm-dialog {
		background-color: rgba(6, 30, 78, 0.95) !important;
		border: 1px solid rgba(59, 128, 255, 0.2) !important;
		border-radius: 4px !important;

		.el-message-box__header {
			background-color: rgba(13, 43, 101, 0.5) !important;
			border-bottom: 1px solid rgba(59, 128, 255, 0.2) !important;
			padding: 15px 20px !important;

			.el-message-box__title {
				color: #3b80ff !important;
				font-size: 16px !important;
				font-weight: bold !important;
			}

			.el-message-box__headerbtn .el-message-box__close {
				color: #6b91c7 !important;

				&:hover {
					color: #3b80ff !important;
				}
			}
		}

		.el-message-box__content {
			padding: 20px !important;
			color: #fff !important;
			font-size: 14px !important;
		}

		.el-message-box__btns {
			padding: 10px 20px 20px !important;

			.el-button {
				border-radius: 4px !important;
				padding: 8px 20px !important;
				font-size: 14px !important;

				&.el-button--default {
					background-color: rgba(59, 128, 255, 0.1) !important;
					border: 1px solid rgba(59, 128, 255, 0.2) !important;
					color: #3b80ff !important;

					&:hover {
						background-color: rgba(59, 128, 255, 0.2) !important;
						border-color: #3b80ff !important;
					}
				}

				&.el-button--primary {
					background-color: #3b80ff !important;
					border-color: #3b80ff !important;

					&:hover {
						background-color: #66b1ff !important;
						border-color: #66b1ff !important;
					}
				}
			}
		}
	}

	/* 地图标签样式 */
	:deep(.BMapLabel) {
		border: none !important;
		background-color: rgba(59, 128, 255, 0.8) !important;
		color: #ffffff !important;
		font-size: 14px !important;
		padding: 5px 8px !important;
		border-radius: 4px !important;
		font-family: 'Microsoft YaHei' !important;
		pointer-events: none !important;
		white-space: nowrap !important;
		z-index: 1000 !important;
		max-width: none !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
	}

	/* 添加动画关键?*/
	@keyframes fadeInRight {
		from {
			opacity: 0.5;
			transform: translateX(15px);
		}

		to {
			opacity: 0.85;
			transform: translateX(0);
		}
	}

	/* 设备状态新样式 */
	.device-status-container {
		padding: 15px !important;
		height: auto !important;
	}

	.device-status-overview {
		display: flex;
		height: 100%;
		align-items: center;
		gap: 20px;
		padding: 5px;
	}

	.device-status-gauge {
		position: relative;
		flex: 0 0 140px;
		height: 140px;
	}

	.gauge-display {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}

	.gauge-number {
		font-size: 28px;
		font-weight: bold;
		color: #fff;
		text-shadow: 0 0 10px rgba(24, 210, 110, 0.5);
		line-height: 1;
		margin-bottom: 5px;
	}

	.gauge-label {
		font-size: 14px;
		color: #6b91c7;
	}

	.gauge-ring {
		position: relative;
		width: 100%;
		height: 100%;
	}

	.gauge-ring svg {
		width: 100%;
		height: 100%;
		transform: rotate(-90deg);
	}

	.gauge-ring-bg {
		fill: none;
		stroke: rgba(59, 128, 255, 0.1);
		stroke-width: 8;
	}

	.gauge-ring-fill {
		fill: none;
		stroke: #18d26e;
		stroke-width: 8;
		stroke-linecap: round;
		transition: stroke-dasharray 0.8s ease;
		filter: drop-shadow(0 0 6px rgba(24, 210, 110, 0.5));
	}

	.gauge-text {
		font-size: 10px;
		fill: #fff;
		text-anchor: middle;
		transform: rotate(90deg);
	}

	.gauge-text.online {
		fill: #18d26e;
	}

	.gauge-text.offline {
		fill: #ff9800;
	}

	.device-status-stats {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.status-row {
		display: flex;
		align-items: center;
		background-color: rgba(59, 128, 255, 0.05);
		border-radius: 8px;
		padding: 10px 12px;
	}

	.status-row.total {
		background-color: rgba(59, 128, 255, 0.15);
		margin-top: 5px;
	}

	.status-label {
		display: flex;
		align-items: center;
		width: 100px;
		font-size: 14px;
		color: #fff;
	}

	.status-dot {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		margin-right: 8px;
	}

	.status-dot.online {
		background-color: #18d26e;
		box-shadow: 0 0 8px rgba(24, 210, 110, 0.5);
	}

	.status-dot.offline {
		background-color: #ff9800;
		box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
	}

	.status-count {
		width: 65px;
		text-align: right;
		font-weight: bold;
		color: #fff;
		margin-right: 10px;
	}

	.status-bar-container {
		flex: 1;
		height: 6px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		overflow: hidden;
	}

	.status-bar {
		height: 100%;
		border-radius: 4px;
		transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.status-bar.online {
		background: linear-gradient(to right, #18d26e, #06a94c);
		box-shadow: 0 0 8px rgba(24, 210, 110, 0.5);
	}

	.status-bar.offline {
		background: linear-gradient(to right, #ff9800, #e67e00);
		box-shadow: 0 0 8px rgba(255, 152, 0, 0.5);
	}

	.status-row.total .status-label i {
		font-size: 14px;
		margin-right: 8px;
		color: #3b80ff;
	}

	// 添加更多样式调整，使容器也更合理居中显示
	.battery-panel .panel-content {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		padding: 10px !important;
	}

	#batteryChart {
		width: 100%;
		height: 220px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 性别比例新样?*/
	.gender-ratio-container {
		padding: 15px !important;
		height: 100% !important;
	}

	.gender-horizontal-layout {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: space-between;
	}

	/* 环形进度?*/
	.gender-ratio-ring {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 45%;
	}

	.ring-container {
		position: relative;
		width: 130px;
		height: 130px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ring-background {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.05);
	}

	.ring-progress {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		mask: radial-gradient(transparent 45px, #000 46px);
		-webkit-mask: radial-gradient(transparent 45px, #000 46px);
		transform: rotate(-90deg);
		box-shadow: 0 0 20px rgba(59, 128, 255, 0.3);
		animation: rotateIn 1.5s ease-out;
	}

	.ring-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(59, 128, 255, 0.2), rgba(232, 62, 140, 0.2));
		box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
		animation: pulseIn 1s ease-out;
	}

	.total-count {
		font-size: 24px;
		font-weight: 700;
		color: #fff;
		line-height: 1;
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	}

	.total-label {
		font-size: 12px;
		color: #6b91c7;
		margin-top: 4px;
	}

	.ring-legend {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 15px;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.legend-color {
		width: 12px;
		height: 12px;
		border-radius: 50%;
	}

	.legend-item.male .legend-color {
		background: #3b80ff;
		box-shadow: 0 0 10px rgba(59, 128, 255, 0.5);
	}

	.legend-item.female .legend-color {
		background: #e83e8c;
		box-shadow: 0 0 10px rgba(232, 62, 140, 0.5);
	}

	.legend-text {
		font-size: 13px;
		color: #fff;
		font-weight: 500;
	}

	/* 3D 卡片 */
	.gender-cards {
		width: 50%;
	}

	.card-container {
		display: flex;
		flex-direction: column;
		gap: 15px;
		perspective: 800px;
	}

	.gender-card {
		position: relative;
		width: 100%;
		height: 80px;
		border-radius: 12px;
		overflow: hidden;
		transform-style: preserve-3d;
		transform: translateZ(0);
		transition: transform 0.5s ease, box-shadow 0.5s ease;
		animation: cardIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.gender-card:hover {
		transform: translateX(5px) rotateY(5deg);
		z-index: 2;
	}

	.male-card {
		background: linear-gradient(135deg, #0f3b8a, #3b80ff);
		box-shadow: 0 10px 20px rgba(59, 128, 255, 0.3),
			0 0 30px rgba(59, 128, 255, 0.2),
			inset 0 0 15px rgba(255, 255, 255, 0.1);
	}

	.female-card {
		background: linear-gradient(135deg, #a41c72, #e83e8c);
		box-shadow: 0 10px 20px rgba(232, 62, 140, 0.3),
			0 0 30px rgba(232, 62, 140, 0.2),
			inset 0 0 15px rgba(255, 255, 255, 0.1);
	}

	.card-glow {
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
		opacity: 0;
		transition: opacity 0.5s ease;
		pointer-events: none;
	}

	.gender-card:hover .card-glow {
		opacity: 0.5;
	}

	.card-content {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		height: 100%;
		padding: 15px;
	}

	.card-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
		margin-right: 15px;
	}

	.card-icon i {
		font-size: 22px;
		color: #fff;
		text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
	}

	.card-stats {
		display: flex;
		flex-direction: column;
	}

	.card-number {
		font-size: 22px;
		font-weight: 700;
		color: #fff;
		line-height: 1;
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	}

	.card-label {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
		margin-top: 5px;
	}

	/* 动画 */
	@keyframes rotateIn {
		0% {
			transform: rotate(-90deg) scale(0.5);
			opacity: 0;
		}

		100% {
			transform: rotate(-90deg) scale(1);
			opacity: 1;
		}
	}

	@keyframes pulseIn {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}

		70% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes cardIn {
		0% {
			transform: translateY(50px) scale(0.8);
			opacity: 0;
		}

		100% {
			transform: translateY(0) scale(1);
			opacity: 1;
		}
	}

	/* 电量分布样式 */
	.battery-distribution {
		display: flex;
		height: 100%;
		align-items: center;
		gap: 20px;
	}

	.battery-overview {
		width: 45%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.battery-donut {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	.donut-chart {
		position: relative;
	}

	.battery-ring {
		transform: rotate(-90deg);
		transform-origin: center;
		transition: stroke-dashoffset 1.5s ease-in-out;
	}

	.battery-ring.high {
		stroke: #67c23a;
		filter: drop-shadow(0 0 4px rgba(103, 194, 58, 0.5));
	}

	.battery-ring.medium {
		stroke: #409eff;
		filter: drop-shadow(0 0 4px rgba(64, 158, 255, 0.5));
	}

	.battery-ring.low {
		stroke: #e6a23c;
		filter: drop-shadow(0 0 4px rgba(230, 162, 60, 0.5));
	}

	.battery-ring.very-low {
		stroke: #f56c6c;
		filter: drop-shadow(0 0 4px rgba(245, 108, 108, 0.5));
	}

	.donut-count {
		font-size: 24px;
		font-weight: 700;
		fill: #fff;
		dominant-baseline: middle;
	}

	.donut-label {
		font-size: 12px;
		fill: #6b91c7;
		dominant-baseline: middle;
	}

	.battery-legend {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 10px;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.legend-color {
		width: 12px;
		height: 12px;
		border-radius: 50%;
	}

	.legend-color.high {
		background: #67c23a;
		box-shadow: 0 0 5px rgba(103, 194, 58, 0.5);
	}

	.legend-color.medium {
		background: #409eff;
		box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
	}

	.legend-color.low {
		background: #e6a23c;
		box-shadow: 0 0 5px rgba(230, 162, 60, 0.5);
	}

	.legend-color.very-low {
		background: #f56c6c;
		box-shadow: 0 0 5px rgba(245, 108, 108, 0.5);
	}

	.legend-text {
		font-size: 12px;
		color: #bfcbd9;
	}

	.battery-details {
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.battery-card {
		display: flex;
		align-items: center;
		background: rgba(0, 0, 0, 0.15);
		border-radius: 8px;
		padding: 10px;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.battery-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.1;
		z-index: 0;
	}

	.battery-card:hover {
		transform: translateX(5px);
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	}

	.battery-card.high::before {
		background: #67c23a;
	}

	.battery-card.medium::before {
		background: #409eff;
	}

	.battery-card.low::before {
		background: #e6a23c;
	}

	.battery-card.very-low::before {
		background: #f56c6c;
	}

	.card-icon {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 12px;
		position: relative;
		z-index: 1;
	}

	.battery-card.high .card-icon {
		box-shadow: 0 0 10px rgba(103, 194, 58, 0.3);
	}

	.battery-card.medium .card-icon {
		box-shadow: 0 0 10px rgba(64, 158, 255, 0.3);
	}

	.battery-card.low .card-icon {
		box-shadow: 0 0 10px rgba(230, 162, 60, 0.3);
	}

	.battery-card.very-low .card-icon {
		box-shadow: 0 0 10px rgba(245, 108, 108, 0.3);
	}

	.card-icon i {
		font-size: 18px;
	}

	.battery-card.high .card-icon i {
		color: #67c23a;
	}

	.battery-card.medium .card-icon i {
		color: #409eff;
	}

	.battery-card.low .card-icon i {
		color: #e6a23c;
	}

	.battery-card.very-low .card-icon i {
		color: #f56c6c;
	}

	.card-body {
		flex: 1;
		position: relative;
		z-index: 1;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		font-size: 13px;
		color: #fff;
		margin-bottom: 8px;
	}

	.percentage {
		font-weight: 600;
	}

	.card-progress {
		width: 100%;
		height: 6px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 3px;
		overflow: hidden;
		margin-bottom: 6px;
	}

	.progress-bar {
		height: 100%;
		transition: width 1s cubic-bezier(0.25, 1, 0.5, 1);
	}

	.battery-card.high .progress-bar {
		background: linear-gradient(90deg, #67c23a, #95eb72);
	}

	.battery-card.medium .progress-bar {
		background: linear-gradient(90deg, #409eff, #79bbff);
	}

	.battery-card.low .progress-bar {
		background: linear-gradient(90deg, #e6a23c, #f8d57e);
	}

	.battery-card.very-low .progress-bar {
		background: linear-gradient(90deg, #f56c6c, #fb9b9b);
	}

	.card-count {
		font-size: 14px;
		font-weight: 600;
		color: #fff;
	}

	/* 电量分布样式 */
	.battery-distribution {
		display: flex;
		height: 100%;
		align-items: center;
	}

	.battery-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.battery-item {
		background: rgba(0, 0, 0, 0.15);
		border-radius: 6px;
		padding: 12px 15px;
		overflow: hidden;
	}

	.item-header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 8px;
	}

	.item-icon {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	.battery-item.high .item-icon i {
		color: #67c23a;
	}

	.battery-item.medium .item-icon i {
		color: #409eff;
	}

	.battery-item.low .item-icon i {
		color: #e6a23c;
	}

	.battery-item.very-low .item-icon i {
		color: #f56c6c;
	}

	.item-title {
		font-size: 14px;
		color: #fff;
		font-weight: 500;
	}

	.item-content {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.item-count {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		width: 36px;
	}

	.item-progress {
		flex: 1;
		position: relative;
	}

	.progress-bar {
		height: 8px;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 4px;
		position: relative;
		overflow: hidden;
	}

	.battery-item.high .progress-bar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #67c23a;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.8s ease;
	}

	.battery-item.medium .progress-bar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #409eff;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.8s ease;
	}

	.battery-item.low .progress-bar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #e6a23c;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.8s ease;
	}

	.battery-item.very-low .progress-bar::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: #f56c6c;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.8s ease;
	}

	.battery-item.high .progress-bar::before {
		transform: scaleX(0.5);
	}

	.battery-item.medium .progress-bar::before {
		transform: scaleX(0.5);
	}

	.battery-item.low .progress-bar::before {
		transform: scaleX(0.5);
	}

	.battery-item.very-low .progress-bar::before {
		transform: scaleX(0.5);
	}

	.progress-text {
		position: absolute;
		right: 0;
		top: -20px;
		font-size: 13px;
		color: #eee;
	}

	/* 电量分布样式 - 简化版 */
	.battery-distribution {
		display: flex;
		height: 100%;
		width: 100%;
	}

	.battery-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 15px;
	}

	.battery-item {
		background: rgba(0, 0, 0, 0.15);
		border-radius: 6px;
		padding: 12px;
	}

	.item-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.item-icon {
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		margin-right: 10px;
	}

	.battery-item.high .item-icon i {
		color: #67c23a;
	}

	.battery-item.medium .item-icon i {
		color: #409eff;
	}

	.battery-item.low .item-icon i {
		color: #e6a23c;
	}

	.battery-item.very-low .item-icon i {
		color: #f56c6c;
	}

	.item-title {
		font-size: 14px;
		color: #fff;
	}

	.item-content {
		display: flex;
		align-items: center;
	}

	.item-count {
		width: 30px;
		font-size: 16px;
		font-weight: 600;
		color: #fff;
		margin-right: 10px;
	}

	.item-progress {
		flex: 1;
		position: relative;
	}

	.progress-bar {
		height: 6px;
		border-radius: 3px;
		transition: width 0.5s ease;
	}

	.battery-item.high .progress-bar {
		background: #67c23a;
	}

	.battery-item.medium .progress-bar {
		background: #409eff;
	}

	.battery-item.low .progress-bar {
		background: #e6a23c;
	}

	.battery-item.very-low .progress-bar {
		background: #f56c6c;
	}

	.progress-text {
		position: absolute;
		right: 0;
		top: -18px;
		font-size: 12px;
		color: #ccc;
	}

	/* 电量分布新样?*/
	.battery-panel-content {
		height: 100%;
		padding: 10px 0;
		display: flex;
		align-items: center;
	}

	.battery-dashboard {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.battery-item {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.item-header {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.item-header i {
		font-size: 18px;
		margin-right: 8px;
	}

	.battery-item.high i {
		color: #67c23a;
	}

	.battery-item.medium i {
		color: #409eff;
	}

	.battery-item.low i {
		color: #e6a23c;
	}

	.battery-item.very-low i {
		color: #f56c6c;
	}

	.level-name {
		font-size: 14px;
		font-weight: 500;
		color: #fff;
	}

	.device-count {
		font-size: 14px;
		color: #81a8d7;
		margin-left: 5px;
	}

	.progress-bar {
		height: 12px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 6px;
		overflow: hidden;
		position: relative;
	}

	.progress-value {
		height: 100%;
		transition: width 1s ease-out;
		border-radius: 6px;
	}

	.battery-item.high .progress-value {
		background: linear-gradient(90deg, rgba(103, 194, 58, 0.7), #67c23a);
		box-shadow: 0 0 10px rgba(103, 194, 58, 0.5);
	}

	.battery-item.medium .progress-value {
		background: linear-gradient(90deg, rgba(64, 158, 255, 0.7), #409eff);
		box-shadow: 0 0 10px rgba(64, 158, 255, 0.5);
	}

	.battery-item.low .progress-value {
		background: linear-gradient(90deg, rgba(230, 162, 60, 0.7), #e6a23c);
		box-shadow: 0 0 10px rgba(230, 162, 60, 0.5);
	}

	.battery-item.very-low .progress-value {
		background: linear-gradient(90deg, rgba(245, 108, 108, 0.7), #f56c6c);
		box-shadow: 0 0 10px rgba(245, 108, 108, 0.5);
	}

	/* 修复CSS错误并使用方块样?*/
	.battery-panel-content {
		height: 100%;
		padding: 10px;
		display: flex;
		align-items: center;
	}

	.battery-blocks {
		width: 100%;
		height: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
		gap: 15px;
	}

	.battery-block {
		border-radius: 8px;
		padding: 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.battery-block:hover {
		transform: translateY(-3px);
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
	}

	.battery-block.high {
		background: linear-gradient(135deg, rgba(103, 194, 58, 0.2), rgba(103, 194, 58, 0.4));
		border: 1px solid rgba(103, 194, 58, 0.5);
	}

	.battery-block.medium {
		background: linear-gradient(135deg, rgba(64, 158, 255, 0.2), rgba(64, 158, 255, 0.4));
		border: 1px solid rgba(64, 158, 255, 0.5);
	}

	.battery-block.low {
		background: linear-gradient(135deg, rgba(230, 162, 60, 0.2), rgba(230, 162, 60, 0.4));
		border: 1px solid rgba(230, 162, 60, 0.5);
	}

	.battery-block.very-low {
		background: linear-gradient(135deg, rgba(245, 108, 108, 0.2), rgba(245, 108, 108, 0.4));
		border: 1px solid rgba(245, 108, 108, 0.5);
	}

	.block-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28px;
		margin-bottom: 10px;
	}

	.battery-block.high .block-icon {
		color: #67c23a;
	}

	.battery-block.medium .block-icon {
		color: #409eff;
	}

	.battery-block.low .block-icon {
		color: #e6a23c;
	}

	.battery-block.very-low .block-icon {
		color: #f56c6c;
	}

	.block-info {
		text-align: center;
	}

	.level-name {
		font-size: 14px;
		color: #fff;
		margin-bottom: 5px;
	}

	.device-count {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
	}

	/* 欠租状况样式 */
	.rent-arrears-panel {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.arrears-summary {
		display: flex;
		gap: 10px;
		margin-bottom: 15px;
	}

	.arrears-card {
		flex: 1;
		background: rgba(30, 40, 60, 0.5);
		border-radius: 8px;
		padding: 12px;
		display: flex;
		align-items: center;
	}

	.arrears-icon {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		font-size: 20px;
	}

	.arrears-card.critical .arrears-icon {
		background: rgba(245, 108, 108, 0.2);
		color: #f56c6c;
	}

	.arrears-card.warning .arrears-icon {
		background: rgba(230, 162, 60, 0.2);
		color: #e6a23c;
	}

	.arrears-card.total .arrears-icon {
		background: rgba(64, 158, 255, 0.2);
		color: #409eff;
	}

	.arrears-data {
		flex: 1;
	}

	.arrears-value {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		margin-bottom: 2px;
	}

	.arrears-label {
		font-size: 12px;
		color: #99a9bf;
	}

	.arrears-desc {
		font-size: 11px;
		color: #6b91c7;
	}

	.arrears-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		background: rgba(30, 40, 60, 0.3);
		border-radius: 8px;
		overflow: hidden;
	}

	.list-header {
		display: flex;
		padding: 10px 15px;
		background: rgba(0, 0, 0, 0.2);
		font-size: 13px;
		color: #99a9bf;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.header-col {
		flex: 1;
	}

	.header-col:last-child {
		text-align: right;
	}

	.list-body {
		flex: 1;
		overflow-y: auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #6b91c7;
		padding: 20px;
	}

	.list-empty i {
		font-size: 30px;
		margin-bottom: 10px;
		color: #67c23a;
	}

	.battery-item.high .progress-bar::before {
		transform: scaleX(0);
	}

	.battery-item.medium .progress-bar::before {
		transform: scaleX(0);
	}

	.battery-item.low .progress-bar::before {
		transform: scaleX(0);
	}

	.battery-item.very-low .progress-bar::before {
		transform: scaleX(0);
	}

	.battery-item.high .progress-bar::before {
		/* 修复CSS错误：静态值替代Vue模板变量 */
		transform: scaleX(0.5);
	}

	.battery-item.medium .progress-bar::before {
		/* 修复CSS错误：静态值替代Vue模板变量 */
		transform: scaleX(0.5);
	}

	.battery-item.low .progress-bar::before {
		/* 修复CSS错误：静态值替代Vue模板变量 */
		transform: scaleX(0.5);
	}

	.battery-item.very-low .progress-bar::before {
		/* 修复CSS错误：静态值替代Vue模板变量 */
		transform: scaleX(0.5);
	}

	/* 修复打包错误 - 覆盖包含Vue模板变量的CSS */
	.battery-item.high .progress-bar::before,
	.battery-item.medium .progress-bar::before,
	.battery-item.low .progress-bar::before,
	.battery-item.very-low .progress-bar::before {
		transform: scaleX(0.5) !important;
	}

	.battery-gauge-item {
		background: #1c2235;
		border-radius: 12px;
		padding: 16px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
		transition: all 0.3s ease;
	}

	.battery-gauge-high {
		background: linear-gradient(135deg, rgba(38, 160, 70, 0.2), rgba(38, 160, 70, 0.05));
		border: 1px solid rgba(38, 160, 70, 0.3);
	}

	.battery-gauge-medium {
		background: linear-gradient(135deg, rgba(24, 144, 255, 0.2), rgba(24, 144, 255, 0.05));
		border: 1px solid rgba(24, 144, 255, 0.3);
	}

	.battery-gauge-low {
		background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(245, 166, 35, 0.05));
		border: 1px solid rgba(245, 166, 35, 0.3);
	}

	.battery-gauge-verylow {
		background: linear-gradient(135deg, rgba(245, 34, 45, 0.2), rgba(245, 34, 45, 0.05));
		border: 1px solid rgba(245, 34, 45, 0.3);
	}

	.battery-distribution-panel {
		padding: 16px;
		background: rgba(21, 28, 43, 0.8);
		border-radius: 12px;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.panel-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		color: #fff;
		font-weight: bold;
	}

	.battery-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 16px;
		height: calc(100% - 40px);
	}

	.battery-gauge-item {
		background: #1c2235;
		border-radius: 12px;
		padding: 16px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
		transition: all 0.3s ease;
	}

	.battery-gauge-high {
		background: linear-gradient(135deg, rgba(38, 160, 70, 0.2), rgba(38, 160, 70, 0.05));
		border: 1px solid rgba(38, 160, 70, 0.3);
	}

	.battery-gauge-medium {
		background: linear-gradient(135deg, rgba(24, 144, 255, 0.2), rgba(24, 144, 255, 0.05));
		border: 1px solid rgba(24, 144, 255, 0.3);
	}

	.battery-gauge-low {
		background: linear-gradient(135deg, rgba(245, 166, 35, 0.2), rgba(245, 166, 35, 0.05));
		border: 1px solid rgba(245, 166, 35, 0.3);
	}

	.battery-gauge-verylow {
		background: linear-gradient(135deg, rgba(245, 34, 45, 0.2), rgba(245, 34, 45, 0.05));
		border: 1px solid rgba(245, 34, 45, 0.3);
	}

	.gauge-icon {
		position: absolute;
		left: 16px;
		top: 16px;
		font-size: 22px;
		z-index: 2;
		color: #fff;
		min-width: 24px;
		text-align: center;
	}

	.gauge-info {
		position: relative;
		z-index: 2;
		text-align: center;
		padding-left: 20px;
		white-space: nowrap;
	}

	.gauge-label {
		font-size: 14px;
		color: #bfbfbf;
		margin-bottom: 4px;
	}

	.gauge-value {
		font-size: 22px;
		font-weight: bold;
		color: #fff;
	}

	.gauge-count {
		font-size: 14px;
		color: #bfbfbf;
	}

	.battery-gauge-ring {
		position: absolute;
		width: 90px;
		height: 90px;
		right: 10px;
		border-radius: 50%;
		z-index: 1;
		opacity: 0.8;
	}
</style>

<!-- 更亮主题覆盖样式 -->
<style scoped lang="scss">
	/* 更亮的主题色彩覆盖 */
	.dashboard-container {
		/* 主要蓝色从 #3b80ff 改为 #4f94ff */
		--primary-blue: #4f94ff;
		--primary-blue-light: rgba(79, 148, 255, 0.2);
		--primary-blue-medium: rgba(79, 148, 255, 0.4);
		--primary-blue-dark: rgba(79, 148, 255, 0.6);

		/* 背景色更亮 */
		--bg-primary: rgba(26, 61, 122, 0.6);
		--bg-secondary: rgba(33, 73, 141, 0.6);
		--border-primary: rgba(79, 148, 255, 0.3);
	}

	/* 覆盖所有使用旧蓝色的地方 */
	.panel-title {
		color: var(--primary-blue) !important;
	}

	.data-card:hover {
		border-color: var(--primary-blue-medium) !important;
	}

	.log-item:hover {
		background-color: var(--primary-blue-light) !important;
	}

	.log-scroll-wrapper:hover {
		background-color: rgba(79, 148, 255, 0.08) !important;
	}

	.log-scroll-wrapper::-webkit-scrollbar-thumb {
		background: var(--primary-blue-medium) !important;
	}

	.log-scroll-wrapper::-webkit-scrollbar-thumb:hover {
		background: var(--primary-blue-dark) !important;
	}

	.card-label::before {
		background-color: var(--primary-blue) !important;
		box-shadow: 0 0 8px var(--primary-blue) !important;
	}

	.current-time {
		color: var(--primary-blue) !important;
	}

	/* 地图容器背景更亮 */
	.map-container,
	#baiduMap {
		background-color: #0a1f4a !important;
	}

	/* 图表容器背景更亮 */
	.chart-container {
		background-color: rgba(26, 38, 84, 0.4) !important;
	}
</style>
